使用jQuery淡化div的边缘

Question

如何div用jQuery 淡化a的边缘？想想一个带有水平滑动图像的旋转木马.如何淡出左侧和右侧,使边缘附近的图像逐渐消失.

希望很清楚.:)

Answer 1

Webkit浏览器(即Chrome和Safari)支持一个名为的CSS属性-webkit-mask,它允许您使用CSS3效果(即线性渐变)覆盖元素.

以下样式表规则将淡化白边应用于具有该类的元素.mask:

 .mask {
     -webkit-mask: -webkit-linear-gradient(
          left,
         rgba(255,255,255,0),
         rgba(255,255,255,1) 5%,
         rgba(255,255,255,1) 95%,
         rgba(255,255,255,0)
     );
 }

不幸的是,这只适用于基于webkit的浏览器.如果你想支持其他一切(你可能会这样做),你可能最好使用透明的PNG.

Answer 2

一种简单的方法可能是在边缘显示一组 div，例如具有不同不透明度级别的垂直条带，给人图像淡出的印象。