Demo here

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

不确定这是否适合你，但如果你有一个坚实的背景颜色，你可以淡化一个.png文件，在中间淡化为透明，在图像顶部的边缘淡化为纯色，所以它看起来它正在消失在背景中。

Answer 3

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

Demo here

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

CSS3 demo here

Answer 4

我用过

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

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

Answer 5

我认为jQuery或jQuery UI中没有任何此类效果。如果您要使用JavaScript解决方案，则必须尝试使用第三方插件。

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

不透明度使用CSS3或JS淡化图像？

5 个答案:

Demo here

CSS3 demo here