Question

我有一个工作项目，需要从用户那里获取图像，并根据该图像，在该图像上放置一个思想泡泡或语音气泡。我必须考虑放置和所有这些，但我只是想要首先是工作版。我正在使用jQuery面部识别库来获取图像，但我找不到有关如何在图像上获取气泡的任何信息。

Answer 1

这样的事情怎么样？

您可以将图片放在<div>的{{1}} 50％和border-radius内。这会将图像剪切为圆形。

然后，使用CSS伪元素overflow: hidden和: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);}
}

Answer 2

由于您的问题留下了非常广泛的答案，我将在这里为您提供最简单的方法：

从用户那里获取图像，假设：
- 要么您有自己的方式从用户获取图像，并且在此类实现中不需要帮助，但能够以远程类似于以下方式的HTML格式生成此图像：
- 没有自己的方式来获取图像。在这种情况下，您需要任何类型的实施方面的帮助;根据你的标签：javascript / jquery / css / html允许各种各样，这意味着我可以提供一个非常简单的PHP替代方案：PHP Upload a picture and display on page
在图像上获取气泡：非常宽泛，但考虑到我们有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;
}

担心什么：定制工作，在那个时候你应该回来提出更多问题（请提供代码）。

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

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

2 个答案: