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

Question

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

这只能使用Google Chrome使用CSS吗？我只需要定位此浏览器。

我想避免切成1px高的元素 opacity 放。

谢谢

Answer 1

是的，只需使用一个 -webkit-gradient 以alpha值作为背景图像：

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

如果您只是针对铬，也可以使用 :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)));
}