使用CSS3或JS在图像上实现不透明淡入淡出？

Question

Javascript或CSS3是否可以使图像的左右两侧淡入背景。

Answer 1

<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 2

我用了

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

可以直接在元素上使用，也可以在父元素上使用，但仍会影响子元素。 这很棒！ 仅适用于webkit。

Answer 3

不知道这是否适合您，但是如果您具有纯色背景色，则可以淡化.png文件，该文件在中间淡化为透明色，在图像顶部的边缘淡化为纯色，因此看起来像逐渐淡出背景。

Answer 4

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

在这里演示

在现代浏览器中，您可以为此使用CSS3 box-shadow属性。

CSS3演示在这里

Answer 5

我认为jQuery或jQuery UI没有这样的效果。 如果您要使用JavaScript解决方案，则必须尝试使用​​第三方插件。

我认为可以通过Css来实现，但不确定是否可以跨浏览器支持此功能。