尝试结合 CSS 渐变和背景图片答案

【问题标题】：Trying to combine CSS gradient and background image尝试结合 CSS 渐变和背景图片
【发布时间】：2012-08-27 07:49:11
【问题描述】：

我想在图像上使用透明渐变，所以我做了以下操作，但它只显示图像

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

有什么想法吗？

【问题讨论】：

标签： css background gradient

【解决方案1】：

当您首先指定您的图像时，该图像将绘制在渐变之上，完全遮蔽它。您需要切换它们以便渐变在顶部分层（参见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() 部分。

【讨论】：

【解决方案2】：

背景的顺序（想想 z-index）与逻辑完全相反。您设置的第一个背景是最上面的：

http://css-tricks.com/stacking-order-of-multiple-backgrounds/

这给我带来了类似的挫败感。只需垂直考虑，就像在链接上一样：

body {
    background:
        background1, <-top
        background2,
        background3; <-bottom
}

【讨论】：