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

How to place a thought bubble on top of an image CSS

本文关键字：一个 气泡 图像 CSS      更新时间：2023-09-26

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

这样的事情呢？

您可以将图像放置在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-q-c-200-200-1.jpg" alt="Person" >
</div>
</div>

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

  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;
}
  1. 担心什么：自定义工作，在那个时间点你应该回来提出更多问题（请编写代码）。

无论您希望使其工作多么整洁，除非我们从您那里看到更多代码，否则您都不会从任何人那里得到直接而准确的答案。除此之外，我相信从简单开始并从那里开始工作会带你很长的路......祝你好运！

相关文章：