如何在圖像頂部放置一個思想泡泡CSS

Question

我有一個工作項目，需要從用戶那裏獲取圖像，並基於該圖像將思想泡泡或氣泡置於該圖像的頂部。必須考慮安置和所有這些，但我只想要一個工作版本。我爲圖像使用了jQuery面部識別庫，但是我找不到有關如何在圖像上產生氣泡的任何信息。

Answer 1

這樣的事情呢。

您可以將圖像放置在<div>中，該圖像的border-radius爲50％，overflow: hidden。這會將圖像剪裁成圓形。

然後，使用CSS僞元素:before和:after，您可以創建兩個思想氣泡追蹤。

我還添加了一些動畫，使氣泡浮動。

body { 
 
    text-align: center; 
 
} 
 
.bubble-inner { 
 
    overflow: hidden; 
 
    border-radius: 50%; 
 
    animation: float 2s ease-in-out infinite; 
 
} 
 
.bubble img { 
 
    display: block; 
 
    max-width: 100%; 
 
} 
 
.bubble { 
 
    position: relative;  
 
    display: inline-block; 
 

 
} 
 
.bubble:before, 
 
.bubble:after { 
 
    content: ''; 
 
    position: absolute; 
 
    background-color: rgba(255,255,255,0.5); 
 
    box-shadow: inset 0px 0px 2px 0px #000; 
 
    border-radius: 50%; 
 
} 
 
.bubble:after { 
 
    padding: 40px; 
 
    bottom: -40px; 
 
    left: 0; 
 
    animation: float 2s ease-in-out 0.2s infinite; 
 
} 
 
.bubble:before { 
 
    padding: 20px; 
 
    bottom: -60px; 
 
    left: -20px; 
 
    animation: float 2s ease-in-out 0.3 infinite; 
 
} 
 

 
@keyframes float { 
 
    0% {transform: translate(0,0) scale(1,1);} 
 
    50% {transform: translate(0px,10px) scale(1.05,1);} 
 
    100% {transform: translate(0,0) scale(1,1);} 
 
}

<div class="bubble"> 
 
    <div class="bubble-inner"> 
 
    <img src="http://lorempixel.com/output/people-q-c-200-200-1.jpg" alt="Person" > 
 
</div> 
 
</div>

Answer 2

由於您的問題留下了非常廣泛的答案，我會給你在這兒用最簡單的方法：

1. 從用戶獲取的圖像，假設：

   • 要麼你有你自己的方式獲取圖像用戶也不需要在這樣的實施幫助，但可以在HTML產生在遠程類似於下面的方式這一形象：
   • 不要有自己獲得的方式圖片。在這種情況下，您需要任何形式的實施方面的幫助;它根據您的標籤：使用Javascript/jQuery的/ CSS/HTML允許各種各樣的，這意味着我可以用一個非常簡單的PHP替代提供：PHP Upload a picture and display on page

2. 獲取圖像上的泡沫：再次很廣，但考慮到我們有可用的CSS（以及作爲標籤的一部分），那麼我可以輕鬆地向您推薦完成此項工作的各種方法（包括此處已提供的答案）：Speech bubble with a shadow。然後，您可以使用純CSS或Javascript，以便在圖像成功加載到頁面上後，動態地在圖像上顯示對話框。

HTML：

<span class="bubble">Speech bubble with a shadow</span> 

CSS：

body { 
    background: #d6d6d6; 
    padding: 100px; 
} 

/* Speech bubble with a shadow */ 

.bubble { 
    background-color: #fff0a0; 
    background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0)); 
    background-image: -moz-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0)); 
    background-image:  -ms-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0)); 
    background-image:  -o-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0)); 
    background-image:   linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0)); 
    border-radius: 5px; 
    box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5), 
       3px 3px 0 hsla(0,0%,0%,.1); 
    color: #333; 
    display: inline-block; 
    font: 16px/25px sans-serif; 
    padding: 15px 25px; 
    position: relative; 
    text-shadow: 0 1px 1px hsla(0,0%,100%,.5); 
} 
.bubble:after, .bubble:before { 
    border-bottom: 25px solid transparent; 
    border-right: 25px solid #fff0a0; 
    bottom: -25px; 
    content: ''; 
    position: absolute; 
    right: 25px; 
} 
.bubble:before { 
    border-right: 25px solid hsla(0,0%,0%,.1); 
    bottom: -28px; 
    right: 22px; 
} 

什麼擔心：在時間的定製工作，在這一點上，你應該來回到更多的問題（和代碼請）。

無論你希望如何實現這個目標，你都不會得到任何人的直接和確切的答案，除非我們從你身邊看到更多的代碼。除此之外，我相信從這裏開始簡單並繼續工作會讓你走得很遠......祝你好運！