CSS3 opacity属性为其中一个背景图片

Question

background: url('./images/pattern.png'), linear-gradient(to bottom right, rgb(62,131,255), rgb(64,126,253), rgb(99,22,203), rgb(122,5,240));

这是上面的代码，我想将不透明度仅应用于png图像，而不是线性渐变颜色。是否可以这样做？

提前致谢。

Answer 1

您可以使用::after伪元素。

div#bg {
    /* Assuming other properties are set */
    background: linear-gradient(to bottom right, rgb(62,131,255), rgb(64,126,253), rgb(99,22,203), rgb(122,5,240));
}

div#bg::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: url('./images/pattern.png');
    opacity: 0.5;
}

Working example.

了解CSS pesudo-element。