使用CSS，Google Chrome可以创建类似于24位PNG的alpha通道效果吗？

您可以使用24位PNG制作一些很酷的技巧，该PNG具有从不透明到完全透明的渐变。在此PNG下方滑动的元素将在褪色时消失

这是否可能仅在Google Chrome中使用CSS？我只需要瞄准这个浏览器

我希望避免使用具有不同

不透明度
集的1px高元素切片

谢谢
可以，只需使用带有Alpha值的
-webkit渐变
作为背景图像：

background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,1)),color-stop(1, rgba(255,255,255,0)));

如果您只是针对Chrome，您还可以使用
：before
和
：after
添加渐变。下面是一个简单的例子。您可以查看（该方法比Chrome更有效，但在FF 3.0中中断，在许多IE版本中不起作用）：

我只知道WebKit支持渐变，rgba支持alpha，你完美地结合了这些想法！非常感谢。当然！很高兴我能帮忙。我猜你已经猜出，
rgba（0,0,0,1）
将是纯黑色，
rgb（0,0,0,0）
将是完全透明的。
div {
  position: relative;
}

div:before, div:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100px;
}


div:before {
  top: 0;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,1)),color-stop(1, rgba(255,255,255,0)));
}


div:after {
  bottom: 0;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(1, rgba(255,255,255,1)),color-stop(0, rgba(255,255,255,0)));
}