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

首先指定图像时，该图像会在渐变顶部绘制，完全遮挡它。您需要切换它们，以便渐变层叠在顶部（请参阅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);

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

Answer 2

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

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

这让我有类似的挫败感。只需在垂直方向上考虑它，就像在链接上一样：

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

试图结合CSS渐变和背景图像

2 个答案: