编辑 - 小提琴已更新，以便在灰色泡泡上获得所需的CSS结果。

Question

我遇到了一个小问题。

我想在下面的jsfiddle中为图片创建叠加效果。 http://jsfiddle.net/39gud4bh/1/

<div>
<img id="bubble" src="http://png-1.findicons.com/files/icons/2711/free_icons_for_windows8_metro/128/speech_bubble.png">
<img src="http://s30.postimg.org/lptvfyod9/speech_bubbleorange.png">
</img>
</div>

#bubble {

}

我希望叠加层的颜色为＃ff9f2d

这怎么可能？一直在尝试我能找到的一切。问题是图像（可能不在jsfiddle中）是具有透明背景的形状。这导致我所有尝试背景/前景过滤颜色以重新着色整个方块而不仅仅是形状。

真的需要一些帮助。提前 - 谢谢！

编辑 - 小提琴已更新，以便在灰色泡泡上获得所需的CSS结果。

Answer 1

我认为你不能只用css将那个黄色的泡泡变成灰色的泡泡。

如果你颠倒透明和彩色部分，并用颜色填充整个正方形，你可以这样做。示例：http://jsfiddle.net/Arministrator/j5gLgyt8/

    #bubble_img{
      background:yellow;
}
    #bubble_img:hover{
          background:#ff9f2d;

或者你可以使用两张图片（css精灵甚至更好），如其中一个答案所示。

Answer 2

这可能不是您正在寻找的确切答案，但也许您可以考虑使用Font Awesome。它将是一个干净，锐利的泡泡，你可以轻松地调整大小和颜色，无论如何你想用CSS。另一种方法是使用SVG。

http://jsfiddle.net/wilchow/39gud4bh/5/

.fa-bubble {
    font-size: 140px;
    color: #333333;
    cursor: pointer;
}
.fa-bubble:hover {
    color: #ff9f2d;
}

Answer 3

只需将第二张图片移到第一张图片上并设置不透明度

即可

#overlay {z-index:100;opacity:0.2;position:relative;left:-131px;top:-3px;
    
}

<div>
    <img id="bubble" src="http://png-1.findicons.com/files/icons/2711/free_icons_for_windows8_metro/128/speech_bubble.png">
    </img>
    <img id="overlay" src="http://s30.postimg.org/lptvfyod9/speech_bubbleorange.png">
</div>

Answer 4

据我所知，没有CSS属性可以将灰色图像更改为彩色图像。

但是，使用CSS过滤器可以反过来。

因此，如果我们改变过程＆＃39;默认情况下，我们可以删除该样式，也许是在悬停时，以实现我们正在寻找的效果。

＆＃13;

#bubble {
  -webkit-filter: grayscale(1) brightness(0.3);
}
#bubble:hover {
  -webkit-filter: none
}

＆＃13;

<div>
  <img id="bubble" src="http://s30.postimg.org/lptvfyod9/speech_bubbleorange.png" />
</div>

＆＃13;

Jsfiddle Comparison

注意：CSS过滤器高度实验性，浏览器支持效果不佳。

这是一项实验技术 y

因为这项技术   规范尚未稳定，请检查兼容性表   在各种浏览器中使用的正确前缀。还要注意   实验技术的语法和行为可能会发生变化   在规范更改的未来版本的浏览器中

MDN Reference

CanIUse.com Reference

颜色覆盖在形状上

编辑 - 小提琴已更新，以便在灰色泡泡上获得所需的CSS结果。

4 个答案: