W3C home > Mailing lists > Public > www-style@w3.org > February 2012

Re: [css3-background]

From: Philippe Wittenbergh <ph.wittenbergh@l-c-n.com>
Date: Tue, 28 Feb 2012 17:46:05 +0900
Message-Id: <3EF46063-D69A-47EE-B4C7-80C18AFC4D29@l-c-n.com>
To: www-style <www-style@w3.org>

On Feb 28, 2012, at 4:37 PM, Brad Kemper wrote:

>> That said, you can achieve the effect you want by with the image()
>> function <http://dev.w3.org/csswg/css3-images/#image-notation> by just
>> putting the color you want inside of it, as illustrated in example 7
>> at the link I gave.
> Or you could create an inner (inset) shadow with a really large spread (no blur or offsets needed). Or you could use ::before to create an absolutely positioned box that fills up the width and height of the element. These are hacks, of course, but are more or less usable now (the second one would work in more versions of IE).

Or use a gradient with the same start and stop colors to overlay the background-image…

div { background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(path/to/image.png) yellow }

Philippe Wittenbergh
Received on Tuesday, 28 February 2012 08:46:30 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:12 UTC