如何在图像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. 需要担心的是：定制工作，在那个时候你应该回来提出更多问题（请提供代码）。

无论你希望如何使用它，你都不会得到任何人的直接和准确的答案，除非我们看到你身边的更多代码。 除此之外，我相信从那里开始简单和工作将需要很长的路要走...祝你好运！