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

Question

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

通过我认为可能有效的代码来解释可能会更好:

#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 文件的更下方。

我知道这里有些人会说“只需将渐变应用于您正在制作的 PNG”——但这并不理想，因为 div 将保持动态高度——有时很短，有时又很高。我知道这个渐变不是必要的，但我认为可能值得询问一下你们的想法。

是否可以有背景图像，同时将其余背景保持为渐变？

Answer 1

请记住，CSS 渐变实际上是一个 image value ，而不是某些人可能期望的颜色值。因此，它具体对应于 background-image，而不是 background-color，或者整个 background 简写。

本质上，您真正想要做的是将两个 背景图像分层:渐变上的位图图像。为此，您可以在同一声明中同时指定它们，并使用逗号分隔它们。首先指定图像，然后指定渐变。如果您指定背景颜色，该颜色将始终绘制在最底部的图像下方，这意味着渐变将很好地覆盖它，即使在回退的情况下也能正常工作。

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

#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 作为渐变，它总是在 背景上绘制。

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

---

¹ _{从技术上讲，background-position 和 background-repeat 声明适用于此处的两个层，因为间隙已被填充通过重复值而不是固定值，但是由于 background-position 是它的初始值并且 background-repeat 对于覆盖整个元素的渐变无关紧要，所以它不太重要了。可以找到有关如何处理分层背景声明的详细信息 here .}