不透明度使用CSS3或JS在图像上淡出？

Question

有没有一种方式与Javascript或CSS3有一个图像的左侧和右侧淡入背景。

Answer 1

您可以在图像上叠加PNG图像以获得所需的效果。 IE不能正确渲染部分透明的PNG图像。对于此浏览器，您需要一些解决方法，例如IE PNG Fix。

Demo here

在现代浏览器中，你可以使用CSS3 box-shadow属性用于此目的。

CSS3 demo here

Answer 2

不知道这是否适合你，但如果你有一个坚实的背景色，你可以淡入淡出中间透明的.png文件，并在图像顶部的边缘处显示纯色，所以它看起来像是退色到背景中。

Answer 3

我不这么认为任何这样的效果是jQuery或jQuery UI可用。如果您打算使用JavaScript解决方案，您将不得不尝试第三方插件。

我认为有可能通过Css但不确定跨浏览器支持此功能。

Answer 4

<div style="position:relative;height:100px;width:100px"> 
    <div style="position:absolute;z-index:2;width:100%;height:100%;-moz-box-shadow: inset 0 0 5px 5px #fff;-webkit-box-shadow: inset 0 0 5px 5px #fff;box-shadow: inset 0 0 5px 5px #fff;"></div> 
    <img style="position:absolute;z-index:1"src="images/my100.png"></img> 
</div> 

这造成了白色的淡入淡出。检查出一些箱子阴影这里的CSS http://www.css3.info/preview/box-shadow/

Answer 5

我用

-webkit-mask-image: -webkit-gradient(linear, left 90%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); 

，可以直接在元素或父元素上使用，并且仍然影响孩子。这很棒！仅适用于webkit。