透明背景图像的渐变 [英] Transparent Background Image with a Gradient

问题描述

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

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.

这可能是更好的通过code我认为可能的工作说明：

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 );
}

我一直在寻找的是，大多数浏览器选择一个或其他 - 大多数选择渐变因为它的进一步下跌的CSS文件

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.

我知道有些球员在这里会说只适用梯度你正在做的PNG - 但是那并不理想，因为在div将保持一个动态的高度 - 有时是很短的，有时是非常高的。我知道这倾斜度不的必需的，但我想这可能是值得一问你们，你在想什么。

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.

是否有可能有一个背景图像，同时保持背景的其余部分作为一个梯度？

推荐答案

请记住，一个CSS梯度​​实际上是一种的形象价值，并不像有些人可能想到的颜色值。因此，对应于背景图片明确，而不是背景颜色，或整个背景的简写。

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.

由于你包括供应商prefixes，你需要为每个preFIX这样做一次，一次为prefixless和一次回退（没有梯度）。为了避免重复其他值，使用手写性能 ¹ 而不是背景的简写：

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:

#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);
}

不幸的是，这并不正确的IE浏览器，因为它使用的工作过滤器渐变，它总是描绘的在的背景。

Unfortunately this doesn't work correctly in IE as it uses filter for the gradient, which it always paints over the background.

要解决IE的问题，您可以将过滤器，并在不同的元素的背景图像。这将避免CSS3多背景的力量，虽然，因为你可以做分层对于所有浏览器，但是这是一个权衡，你将不得不作出。如果你不需要支持IE版本不实行规范化CSS渐变，你还有什么可担心的。

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.

¹ <子>从技术上来说，背景位置和背景重复声明适用于这里两层，因为差距是由重复的值填充，而不是夹住，但由于背景位置是它的初始值和背景-repeat 不要紧，覆盖整个元素的梯度，它并没有太大的关系。如何分层背景的声明被处理的细节可以在这里找到 。

¹ _{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屋！