html - 使用不同的选择器组合多个背景图像

Question

在 css 3 中，您可以将多个背景应用于一个元素，例如:

background-image: linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));

有没有办法在另一个选择器中添加背景？

这是我想做的一个例子:

p {
    background-image: linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
}

p.one {
    background-image: url("/somepicture.png");
}

p.two {
    background-image: url("/someotherpicture.png");
}

这里的意图是一个 p 类 one 标签有渐变，还有图像，two 也有渐变+ 一张不同的图片。

显然上面的语法只是覆盖了背景图像，所以那是行不通的。

有没有办法在 CSS3 中做到这一点？

Answer 1

您可以尝试一种解决方法，将 p 标签显示属性设置为 block 及其相对位置。然后添加一个 before 或 after 伪元素，使用你想要的渐变样式。