Fatal编程技术网
  • image/
  • Image 不透明度仅在img上，不在其背景上

Image 不透明度仅在img上，不在其背景上

image css

Image 不透明度仅在img上，不在其背景上,image,css,opacity,background-color,Image,Css,Opacity,Background Color,我有这个img： <img src="img1.png" alt="" /> 您可以看到img的背景色也褪色了。我怎样才能只给img设置opacity，而给背景设置不设置？ 您需要另一个周围的HTML元素来实现此效果 HTML： <div class="wrapper"> <img src="http://i.stack.imgur.com/hUOmz.jpg" alt="" /> </div> img { opacity:

我有这个
img
：

<img src="img1.png" alt="" />
您可以看到
img
的
背景色也褪色了。我怎样才能只给
img
设置
opacity
，而给
背景设置不设置
？

您需要另一个周围的HTML元素来实现此效果

HTML：


<div class="wrapper"> 
    <img src="http://i.stack.imgur.com/hUOmz.jpg" alt="" />
</div>



img {
    opacity: 0.4;
    padding: 5px;
}

.wrapper {
    font-size: 0;
    display: inline-block;
    background-color: green;
}



将
display
设置为
inline block
包装
img
，而不指定任何大小
 恐怕你得接受一些更剧烈的变化。画布可以做，添加父元素可以做，或者在图像服务器端应用过滤器也可以。很有可能你真的可以用IE过滤器做你想做的事情。不透明度设置元素img的透明度，它应用了背景色。所以它也是透明的。你需要另一个HTML元素，图像后面有背景色。我希望
img
褪色为white@majidgeek这不是不透明的意思。不透明度会让你看清楚，你会开始看到它背后的颜色。如果你想要白色，就把白色放在后面。@majidgeek绿色背景色有什么意义呢？你想得到什么结果？@KilianStinson你要么让img
vertical align:bottom或<代码>显示：块修复图像下方的“空白”。（至少在Chrome上是这样）@RenéGeuze好的，那么我怎样才能达到我的目标呢？

img {
    opacity: 0.4;
    padding: 5px;
}

.wrapper {
    font-size: 0;
    display: inline-block;
    background-color: green;
}