Re: [gradients] basics

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