css - 尝试结合 CSS 渐变和背景图片

Question

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

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

任何想法为什么？

Answer 1

当您首先指定图像时，该图像被绘制在渐变顶部，完全遮蔽它。您需要切换它们，以便渐变在顶部分层（参见规范）：

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

不要忘记包括其余的渐变前缀和无前缀的。虽然当你这样做时，这也意味着复制你的声明url()部分。background-image

Answer 2

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

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

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

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