css - 使用 CSS，谷歌浏览器能否创建类似于 24 位 PNG 的 alpha 通道效果？

Question

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

这是否可以仅在 Google Chrome 中使用 CSS？我只需要定位这个浏览器。

我想避免使用不同opacity集合的 1px 高元素。

谢谢

Answer 1

是的，它可以，只需使用-webkit-gradient带有 Alpha 值的 a 作为背景图像：

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