如何在圖像CSS上放置思想泡泡

Question

我有一個工作項目，需要從用戶那里獲取圖像，並根據該圖像，在該圖像上放置一個思想泡泡或語音氣泡。我必須考慮放置和所有這些，但我只想要一個工作版本第一。 我正在使用jQuery面部識別庫來獲取圖像，但我找不到有關如何在圖像上獲取氣泡的任何信息。

Answer 1

這樣的事情呢。

您可以將圖像放在border-radius為50％且overflow: hidden的<div>中。 這會將圖像剪切為圓形。

然后，使用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-qc-200-200-1.jpg" alt="Person" > </div> </div> 

Answer 2

由於您的問題留下了非常廣泛的答案，我將在這里為您提供最簡單的方法：

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

   • 您可以使用自己的方式從用戶獲取圖像，並且在此類實現中不需要幫助，但能夠以遠程類似於以下方式的HTML格式生成此圖像：
   • 沒有自己的方式來獲取圖像。 在這種情況下，您需要任何類型的實施方面的幫助; 根據你的標簽：javascript / jquery / css / html允許多種多樣，這意味着我可以提供一個非常簡單的PHP替代方案： PHP上傳圖片並在頁面上顯示

2. 在圖像上獲得一個泡泡：非常寬泛，但考慮到我們有CSS可用（以及作為標簽的一部分），那么我可以輕松地向您介紹完成此操作的各種方法（包括此處已提供的答案） ： 帶陰影的語音泡泡 。 然后，您可以使用純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;
}

3. 需要擔心的是：定制工作，在那個時候你應該回來提出更多問題（請提供代碼）。

無論你希望如何使用它，你都不會得到任何人的直接和准確的答案，除非我們看到你身邊的更多代碼。 除此之外，我相信從那里開始簡單和工作將需要很長的路要走...祝你好運！