Combining multiple background-images with different selectors

Question

In css 3 you can apply multiple backgrounds to an element like this for example:

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

Is there a way that in another selector I can add a background?

Here's an example of what I'd like to do:

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

The intent here is that a p -tag with class one has the gradient, but also the image and with two also the gradient + a different image.

Obviously the above syntax just overwrites the brackground-image, so that doesn't work.

Is there a way to do this in CSS3?

Answer 1

You can try an workaround and set p tag display property to block and it's position relative. Then add an before or after pseudo-element styled with your desired gradient.