如何在图像顶部放置一个思想泡泡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; 
} 

什么担心：在时间的定制工作，在这一点上，你应该来回到更多的问题（和代码请）。

无论你希望如何实现这个目标，你都不会得到任何人的直接和确切的答案，除非我们从你身边看到更多的代码。除此之外，我相信从这里开始简单并继续工作会让你走得很远......祝你好运！