带有渐变的透明背景图像 [英] 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.

最好通过我认为可行的代码来解释:

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 渐变实际上是一个 图像值，而不是某些人所期望的颜色值.因此，它具体对应的是background-image，而不是background-color，或者整个background的简写.

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.

因为您包含供应商前缀，所以您需要为每个前缀执行一次，为无前缀执行一次，为回退执行一次(没有渐变).为避免重复其他值，请使用简写属性¹ 而不是 background 简写:

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 中无法正常工作，因为它使用 filter 作为渐变，它总是在 背景上绘制.

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

要解决 IE 的问题，您可以将 filter 和背景图像放在不同的元素中.不过，这将消除 CSS3 多背景的强大功能，因为您可以为所有浏览器进行分层，但这是您必须做出的权衡.如果您不需要支持未实现标准化 CSS 渐变的 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.

¹ _{从技术上讲，background-position 和 background-repeat 声明适用于此处的两个层，因为空白已被填充通过重复值而不是钳位，但由于 background-position 是它的初始值，并且 background-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屋！