Is it possible to combine a background image with a rgba color without using a rgba gradient?
Currently my css3 style looks like this:
html
{
background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)),
url("../icons/sombrero.jpg")no-repeat center center fixed;
}
But I imagine something like this:
html
{
background:rgba(0, 0, 0, 0.75),
url("../icons/sombrero.jpg")no-repeat center center fixed;
}
The rgba color should lay above the image. I got the gradient-'hack' from here. I search for an alternative to the gradient technique, no box-shadow trick.
It will be possible probably in the future.
from the w3c draft:
For example, one can use this as a simple way to "tint" a background image, by overlaying a partially-transparent color over the top of the other image:
background-image: image(rgba(0,0,255,.5)), url("bg-image.png");
background-color does not work for this, as the solid color it generates always lies beneath all the background images.
w3c documentation
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With