透明背景图像与渐变

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渐变实际上是一个图像值,而不是某些人可能期望的颜色值.因此,对应于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对于覆盖整个元素的梯度无关紧要,因此也无关紧要许多.可以在此处找到有关如何处理分层背景声明的详细信息.}

Answer 2

图像和渐变的顺序在这里非常关键,我想说清楚.渐变/图像组合效果最好......

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

background-image 也会工作......

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

渐变需要先来......继续前进.这里的绝对关键是渐变使用至少 1个RGBA颜色......颜色需要透明才能让图像通过.(rgba(20,20,20,***0.5***)).首先将渐变放在你的css中,将渐变放在图像的顶部,因此RGB上的alpha设置越低,你看到的图像就越多.

另一方面,如果你使用相反的顺序,PNG需要具有透明属性,就像渐变一样,让渐变透过.图像的推移顶部,这样你的PNG需要保存为在Photoshop中一个24位带alpha区......或与阿尔法地区烟花32位(或GIF我猜... BARF),所以你可以看到下面的渐变.在这种情况下,渐变可以使用HEX RGB或RGBA.

这里的关键区别在于外观.在顶部时,图像将更加生动.在下面,您可以在浏览器中调整RGBA值以获得所需的效果...而不是在图像编辑软件中来回编辑和保存.

希望这有帮助,原谅我的过度简化.

Answer 3

您可以使用透明度和渐变.渐变支持透明度.例如,您可以在堆叠多个背景时使用此功能,以在背景图像上创建淡化效果.

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