具有渐变的透明背景图像-TransparentBackgroundImagewithaGradient

37  

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.

请记住CSS渐变实际上是一个图像值，而不是一些人所期望的颜色值。因此，它具体对应于背景图像，而不是背景颜色，或整个背景速记。

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 properties¹ instead of the background shorthand:

因为您包含了供应商前缀，所以需要对每个前缀执行一次此操作，一次为无前缀，一次为回退(没有渐变)。为了避免重复其他值，请使用longhand properties1而不是后台速记:

#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.

不幸的是，这在IE中不能正确使用，因为它使用了渐变的过滤器，它总是在后台绘制。

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.

要解决IE的问题，可以将过滤器和背景图像放在单独的元素中。这将消除CSS3多种背景的强大功能，因为您可以为所有浏览器进行分层，但这是您必须做出的权衡。如果您不需要支持那些没有实现标准CSS梯度的IE版本，您就不必担心。

¹ _{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.}

从技术上讲，背景位置和背景重复声明适用于这里的两个层，因为空白是通过重复值而不是夹具来填充的，但是由于背景位置是它的初始值，而背景重复对于覆盖整个元素的渐变来说并不重要，所以它也不太重要。关于如何处理分层背景声明的细节可以在这里找到。

5  

The order of the image and gradient is very KEY here, i want to make that clear. The gradient/image combo works best like this...

图像和梯度的顺序在这里很关键，我想说清楚。渐变/图像组合最适合这样……

background: -webkit-gradient(linear, top, rgba(0,0,0,0.5), rgba(200,20,200,0.5)), url('../images/plus.png');

background-image will also work...

背景图像也将工作……

background-image: -webkit-gradient(linear, top, rgba(0,0,0,0.5), rgba(200,20,200,0.5)), url('../images/plus.png');

the gradient needs to come first... to go on top. The absolute key here though is that the gradient uses at least 1 RGBA color... the color(s) need to be transparent to let the image come through. (rgba(20,20,20,***0.5***)). putting the gradient first in you css places the gradient on top of the image, so the lower the alpha setting on you RGBAs the more you see the image.

坡度需要放在第一位……去上。这里的绝对关键是梯度使用至少1 RGBA颜色…颜色必须是透明的，才能让图像通过。20(rgba(20、20日,* * * 0.5 * * *))。首先在css中添加渐变，将渐变放置在图像的顶部，因此RGBAs上alpha设置越低，你看到的图像就越多。

Now on the other hand if you use the reverse order the PNG needs to have transparent properties, just like the gradient, to let the gradient shine through. The image goes on top so your PNG needs to be saved as a 24 bit in photoshop with alpha areas... or a 32 bit in fireworks with alpha areas (or a gif i guess... barf), so you can see the gradient underneath. In this case the gradient can use HEX RGB or RGBA.

另一方面，如果你用逆向顺序的话PNG需要有透明属性，就像渐变一样，让渐变通过。图像在顶部，所以你的PNG需要保存为24位在photoshop中与alpha区域…或者是带alpha区域的32位(或者是gif)。所以你可以看到下面的梯度。在这种情况下，梯度可以使用十六进制RGB或RGBA。

The key difference here is the look. The image will be much more vibrant when on top. When underneath you have the ability to tune the RGBA values in the browser to get the desired effect... instead of editing and saving back and forth from your image editing software.

这里的关键区别在于外观。当在顶部的时候，图像会更加生动。当你有能力在浏览器中调整RGBA值以获得想要的效果……而不是编辑和保存从您的图像编辑软件来回。

Hope this helps, excuse my over simplification.

希望这能有所帮助，请原谅我过于简单化。

4  

You can use Transparency and gradients. Gradients support transparency. You can use this, for example, when stacking multiple backgrounds, to create fading effects on background images.

您可以使用透明度和渐变。渐变透明的支持。例如，当你叠加多个背景时，你可以使用它来在背景图像上创建渐隐效果。

background: linear-gradient(to right, rgba(255,255,255,0) 20%,
              rgba(255,255,255,1)), url(http://foo.com/image.jpg);

我在这里看到了一个解决方案。

-1  

Transparent images are not yet a CSS standard, yet they are supported by most modern browsers. However, this is part of the W3C CSS3 recommendation. Implementation varies from one client to another, so you will have to use more than one syntax for cross-browser compatibility.

透明的图像还不是一个CSS标准，但是它们得到了大多数现代浏览器的支持。然而，这是W3C CSS3推荐标准的一部分。实现因客户端而异，所以为了跨浏览器兼容性，您必须使用多个语法。

http://www.handycss.com/effects/transparent-image-in-css/

http://www.handycss.com/effects/transparent-image-in-css/