我想在图像上有透明渐变，所以我做了以下但它只显示图像
background-image: url(../img/hex-pattern.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(8%,rgba(255,255,255,0)), color-stop(92%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,0.2)));
有什么想法吗？
最佳答案
当您首先指定图像时，该图像会绘制在渐变之上，将其完全遮挡。您需要切换它们，以便渐变在顶部分层(请参阅 spec):
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(8%,rgba(255,255,255,0)), color-stop(92%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,0.2))), url(../img/hex-pattern.png);
不要忘记包括其余的渐变前缀和无前缀的。尽管当您这样做时，这意味着还要复制 background-image 声明的 url() 部分。
关于css - 尝试结合 CSS 渐变和背景图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12138085/