您可以使用 24 位 PNG 制作一些很酷的技巧,它具有从不透明到完全透明的渐变。在此 PNG 下方滑动的元素将在淡出时消失。
仅在 Google Chrome 中使用 CSS 是否可行?我只需要定位到这个浏览器。
我想避免设置不同 opacity
的 1px 高元素切片。
谢谢
最佳答案
是的,可以,只需使用带有 Alpha 值的 -webkit-gradient
作为背景图像:
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
来添加渐变。这是一个简单的例子。您可以查看it live on 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)));
}
关于css - 使用 CSS,Google Chrome 可以创建类似于 24 位 PNG 的 alpha channel 效果吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3081613/