Geek Answers Handbook

Does CSS3 support the use of both an image and a gradient for the background of a single <div>?

I know that you can do multiple backgrounds on one <div> in CSS3, but is it possible to combine a background background with images (i.e. url(...) ) with a gradient generation background (e.g. -moz-linear-gradient(...) )?

If so, what is the syntax?

If not, is it best to achieve the same result?

Thanks.

+4
source share
2 answers

You can!

 background: -moz-linear-gradient(-45deg, rgba(0,0,255,0), rgba(0,0,255,1)), url("image");

which can be seen in real time http://software.hixie.ch/utilities/js/live-dom-viewer/saved/675 .

Note, of course, that CSS gradients are still in the stream.

+4
source

I assume that you are trying to conditionally use gradients where they are supported, but the image is otherwise?

If so, then one way would be to do it through Javascript - for example:

 document.getElementById("whatever").style = "url(...)";

I don’t know exactly how to check the type of browser, but it should be a simple Google search.

However, if you are trying to make it so that the image overlays the gradient but is transparent (so that some of the gradients appears), you can try what is described here: http://www.css3.info/introduction- opacity-rgba /

Note that it uses 0.0-1.0 for alpha, not 0-255.

-1
source

More articles:


All Articles