jquery - 使用 jQuery 淡化 div 的边缘

Question

如何使用 jQuery 淡化 div 的边缘？想象一个内部有图像的旋转木马，可以水平滑动。如何淡出左右两侧，使边缘附近的图像逐渐消失。

希望它是清楚的。 :)

Answer 1

Webkit 浏览器(即 Chrome 和 Safari)支持名为 -webkit-mask 的 CSS 属性，该属性允许您使用 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。