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

Question

您可以使用24位PNG制作一些很酷的技巧,它具有从不透明到完全透明的渐变.在PNG下方滑动的元素在褪色时似乎会消失.

这是否可以仅使用CSS与谷歌浏览器？我只需要针对这个浏览器.

我想避免使用具有不同opacity设置的一片1px高的元素.

谢谢

Answer 1

是的它可以,只需使用-webkit-gradientAlpha值作为背景图像:

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添加渐变(如果您愿意).这是一个简单的例子.你可以在CSSDesk上实时 查看它(这种方法比Chrome更多,但在FF 3.0中断,只是在许多IE版本中不起作用):

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)));
}