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。

Answer 2

您可以在包含图像的div上尝试插入阴影，或者在左侧或右侧使用带有阴影的单像素宽的框。对于这些外部元素，您可以将一系列阴影应用于css，从非常透明但宽的阴影构建到相当不透明的阴影。您也可以将这些阴影仅应用于元素的一侧。

for inset：（你必须使叠加高于图像的容器，但宽度相同，并将其浮在上方，如果它的高度相同，则阴影将从所有边出现）

#container_overlay{
   box-shadow: inset 0px 0px 10px 10px white;
   z-index:5;// higher than the container with the images
}

对于任一端的元素，使用普通的盒子阴影。

#end_overlay{
    width:2px;
    box-shadow: 0px 0px 10px 10px white;
    z-index:5;// higher than the container with the images
}

向左或向右浮动，它应该适用于任何理解叠加层的浏览器，任何没有叠加层的浏览器都会忽略它。我不认为你需要在这些内部有任何东西，所以它会是一个看不见的物体，因为它会让影子溢出来。

我已经看到这用于修改多个杂志应用程序的顶部和底部区域，因此文本看起来就像它离开页面时消失。

Answer 3

您可以使用它来设置透明度降低的几个div，并将其放在要淡出的项目上的遮罩中，如下所述：http://www.bennadel.com/blog/1014-Creating-Transparent-Gradients-With-jQuery.htm

Answer 4

我认为这可能是你要找的东西：http://hunyadi.info.hu/en/projects/sigplus/testsuite/30-sigplus-sliders

富

Answer 5

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

Answer 6

就像亚历克斯所说，最简单的方法可能是覆盖一些东西以淡化潜在的div。然而，我只需使用png透明渐变。

虽然这在IE6中并不容易，但总有一种方法（我个人不再支持IE6）：

http://24ways.org/2007/supersleight-transparent-png-in-ie6

使用jQuery淡化div的边缘

6 个答案: