如何在图片上方添加一个思维气泡 CSS

Question

我有一个工作项目，需要从用户那里获取一张图片，并基于该图像在其上方放置一个想法气泡或说话气泡。我必须考虑位置等因素，但我只是想先获得一个可行的版本。我正在使用jQuery面部识别库来处理图像，但我找不到关于如何在图像上放置气泡的任何信息。

- Tiffany Haltom

---

这个对你可能会很有兴趣；http://facedetection.jaysalvat.com/ - Coding Enthusiast

给一个不符合要求的问题点赞+1也是非常糟糕的。@FarizLuqman - Coding Enthusiast

考虑添加一个MCVE以鼓励更好的质量回答。 - sbolel

你的问题非常开放，你需要缩小范围以便更好地帮助你。不妨给我们一个你可以在项目中实现的代码小版本？首先，你如何从用户那里获取图像？关于这个气泡，还有什么更具体的信息我们应该知道吗？ - AGE

我今天刚开始这个项目。我只是想了解其他人的观点，我还没有写代码，我对前端设计非常新，所以我来这里寻求答案。我没有意识到人们在这里对规则如此敏感，我不知道我有任何违规行为？荒谬。我通过Twitter OAUTH或导入/导出两种方式获取图像。 - Tiffany Haltom

Answer 1

可以尝试这样做：

你可以将图片放置在一个具有50%的border-radius和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-q-c-200-200-1.jpg" alt="Person" >
</div>
</div>

- Jackson

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;
}

3. 需要担心的事情：自定义工作，这时你应该带着更多的问题和代码回来。

无论您想让它如何运作得那么整洁，除非我们从您这里看到更多的代码，否则不会从任何人那里得到直接和确切的答案。 除此之外，我相信从简单开始，并从那里逐步提高会使您走得更远... 祝好运！

- AGE