W3C home > Mailing lists > Public > www-style@w3.org > November 2009

Re: [gradients] basics

From: fantasai <fantasai.lists@inkedblade.net>
Date: Sun, 08 Nov 2009 21:10:56 -0800
Message-ID: <4AF7A460.2040406@inkedblade.net>
To: news@terrainformatica.com
CC: www-style <www-style@w3.org>
Andrew Fedoniouk wrote:
> Tab Atkins Jr. wrote:
>> On Sun, Nov 8, 2009 at 9:06 PM, Andrew Fedoniouk
>> <news@terrainformatica.com> wrote:
>>> background: url(...), linear-gradient(magenta yellow)
>>>
>>> It makes no sense - just waste of resources.
>>
>> Huh?  That makes perfect sense - it's an element with two background
>> layers.  The url() references an image on the uppermost layer, and the
>> gradient is on the lower level.  If the first layer has any
>> transparency, it will show the gradient behind it, exactly as
>> expected.
> 
> Sorry, this case:
> 
> background: linear-gradient(magenta yellow), url(...)
> 
> has no visual effect but will force image to be downloaded.
> Image at url(...) will be covered by linear gradient in full.

http://www.w3.org/TR/css3-background/#the-background-image

   # Implementations may optimize by not downloading and drawing images
   # that are not visible (e.g., because they are behind other, fully
   # opaque images).

Also consider
   background: linear-gradient(magenta, transparent), url(...)

~fantasai
Received on Monday, 9 November 2009 05:11:39 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:22 GMT