与梯度的透明背景图象 [英] Transparent Background Image with a Gradient

问题描述

今天我设计了一个透明的PNG背景，它只会坐在一个div的左上角，其余的div会为PNG的所有透明区域和div本身的其余部分保持渐变背景。

最好通过我认为可能工作的代码来解释：

  #mydiv .isawesome {
 / *旧浏览器的基本颜色和位于div左上角的小图片* / 
背景：＃B1B8BD url（'../ images / sidebar_angle.png'）0 0无重复; 
 
 / *梯度我想应用于整个div，在上面提到的PNG后面* / 
 background：-moz-linear-gradient（top，＃ADB2B6 0％ ＃ABAEB3 100％）; 
 background：-webkit-gradient（linear，left top，left bottom，color-stop（0％，＃ADB2B6），color-stop（100％，＃ABAEB3））; 
 filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃ADB2B6'，endColorstr ='＃ABA​​EB3'，GradientType = 0）; 
} 
  

我发现的是大多数浏览器选择一个或另一个 -

我知道这里的一些人会说只是将渐变应用到您正在制作的PNG - 但这不是理想的，因为该div将保持一个动态的高度 - 有时是非常短，有时是非常高的。我知道这个渐变不是必需的，但我认为这可能是值得问你想想什么。

可能具有背景图片，同时将背景的其余部分保留为渐变？

解决方案

CSS渐变实际上是一个图片值，而不是一些颜色值可能期望。因此，它特别对应于 background-image ，而不是 background-color 或整个 background 简写。

基本上，你真正想做的是分层两个背景图片：a位图图像。为此，您在同一个声明中指定它们，并使用逗号分隔它们。先指定图像，然后指定渐变。如果您指定了背景颜色，那么该颜色将始终显示在最底部的图像下方，这意味着渐变会覆盖它，即使在后备情况下也会正常显示。

由于您要包含供应商前缀，因此您需要为每个前缀执行一次，一次为无前缀，一次为后备（无渐变）。为避免重复其他值，请使用长整型属性 ¹ 代替背景简写：

  #mydiv .isawesome {
 background-color：＃B1B8BD; 
 background-position：0 0; 
 background-repeat：no-repeat; 
 
 / * Fallback * / 
 background-image：url（'../ images / sidebar_angle.png'）; 
 
 / * CSS渐变* / 
 background-image：url（'../ images / sidebar_angle.png'），
 -moz- ADB2B6 0％，＃ABAEB3 100％）; 
 background-image：url（'../ images / sidebar_angle.png'），
 -webkit-gradient（linear，left top，left bottom，color-stop（0％，＃ADB2B6）停止（100％，＃ABAEB3））; 
 background-image：url（'../ images / sidebar_angle.png'），
 linear-gradient（to bottom，＃ADB2B6，＃ABAEB3）; 
 
 / * IE * / 
 filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃ADB2B6'，endColorstr ='＃ABA​​EB3'，GradientType = 0）;不幸的是，这在IE中不能正常工作，因为它使用<$ c $  
 
 
 $ 
 
 
 
要解决IE的问题，您可以使用过滤器可以将过滤器和背景图像放在单独的元素中。这将消除CSS3多个背景的力量，虽然，因为你可以只为所有浏览器分层，但这是一个权衡，你必须做。如果您不需要支持不实现标准化CSS渐变的IE版本，您没有什么可担心的。
 
 
 
 
 
 
  1  技术上， background-position 和 background-repeat 这里的声明适用于两个层，因为通过重复值而不是夹紧填充间隙，但由于 background-position 是其初始值和背景-repeat 对于覆盖整个元素的渐变无关紧要，它并不重要。有关如何处理分层背景声明的详细信息，请访问此处。 sub> 
 
Today I was designing a transparent PNG background that would only sit in the top left of a div, and the rest of the div would maintain a gradient background for all transparent areas of the PNG, and the rest of the div itself.

It might be better to explain through the code I thought might work:
#mydiv .isawesome { 
    /* Basic color for old browsers, and a small image that sits in the top left corner of the div */
    background: #B1B8BD url('../images/sidebar_angle.png') 0 0 no-repeat;

    /* The gradient I would like to have applied to the whole div, behind the PNG mentioned above */
    background: -moz-linear-gradient(top, #ADB2B6 0%, #ABAEB3 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ADB2B6), color-stop(100%,#ABAEB3));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ADB2B6', endColorstr='#ABAEB3',GradientType=0 );
}
What I've been finding is that most browsers pick one or the other - most choosing the gradient since its further down the CSS file.

I know some of the guys around here will say "just apply the gradient to the PNG you're making" - but thats not ideal because the div will maintain a dynamic height - sometimes being very short, sometimes being very tall. I know this gradient isn't essential but I thought it might be worth asking y'all what you thought.

Is it possible to have a background image, while keeping the rest of the background as a gradient?
解决方案
Keep in mind that a CSS gradient is actually an image value, not a color value as some might expect. Therefore, it corresponds to background-image specifically, and not background-color, or the entire background shorthand.

Essentially, what you're really trying to do is layering two background images: a bitmap image over a gradient. To do this, you specify both of them in the same declaration, separating them using a comma. Specify the image first, followed by the gradient. If you specify a background color, that color will always be painted underneath the bottom-most image, which means a gradient will cover it just fine, and it will work even in the case of a fallback.

Because you're including vendor prefixes, you will need to do this once for every prefix, once for prefixless, and once for fallback (without the gradient). To avoid having to repeat the other values, use the longhand properties1 instead of the background shorthand:
#mydiv .isawesome { 
    background-color: #B1B8BD;
    background-position: 0 0;
    background-repeat: no-repeat;

    /* Fallback */
    background-image: url('../images/sidebar_angle.png');

    /* CSS gradients */
    background-image: url('../images/sidebar_angle.png'), 
                      -moz-linear-gradient(top, #ADB2B6 0%, #ABAEB3 100%);
    background-image: url('../images/sidebar_angle.png'), 
                      -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ADB2B6), color-stop(100%, #ABAEB3));
    background-image: url('../images/sidebar_angle.png'), 
                      linear-gradient(to bottom, #ADB2B6, #ABAEB3);

    /* IE */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ADB2B6', endColorstr='#ABAEB3', GradientType=0);
}
Unfortunately this doesn't work correctly in IE as it uses filter for the gradient, which it always paints over the background.

To work around IE's issue you can place the filter and the background image in separate elements. That would obviate the power of CSS3 multiple backgrounds, though, since you can just do layering for all browsers, but that's a trade-off you'll have to make. If you don't need to support versions of IE that don't implement standardized CSS gradients, you have nothing to worry about.



1 Technically, the background-position and background-repeat declarations apply to both layers here because the gaps are filled in by repeating the values instead of clamped, but since background-position is its initial value and background-repeat doesn't matter for a gradient covering the entire element, it doesn't matter too much. The details of how layered background declarations are handled can be found here.

                        
这篇关于与梯度的透明背景图象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！