首页 文章

透明背景图像与渐变

提问于
浏览
24

今天我设计了一个透明的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文件 .

我知道这里的一些人会说"just apply the gradient to the PNG you're making" - 但这并不理想,因为div会保持动态的高度 - 有时很短,有时很高 . 我知道这个渐变并不重要,但我认为可能值得问你们所想的一切 .

Is it possible to have a background image, while keeping the rest of the background as a gradient?

5 回答

  • 6

    请记住,CSS渐变实际上是image value,而不是某些人可能期望的颜色值 . 因此,它特别对应于 background-image ,而不是 background-color ,或整个 background 的简写 .

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

    因为您包含供应商前缀,所以您需要为每个前缀执行一次,一次用于无前缀,一次用于回退(不使用渐变) . 要避免重复其他值,请使用longhand属性1而不是 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渐变,那么您无需担心 .


    1从技术上讲,背景位置和背景重复声明适用于这两个层,因为通过重复值而不是钳位来填充间隙,但是因为背景位置是其初始值而背景重复对于渐变覆盖整个元素,没关系太多 . 可以在此处找到有关如何处理分层背景声明的详细信息 .

  • 40

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

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

    enter image description here

  • -1

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

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

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

    另一方面,如果你使用相反的顺序,PNG需要具有透明属性,就像渐变一样,让渐变透过 . 图像在顶部,因此您的PNG需要在带有alpha区域的Photoshop中保存为24位...或者带有alpha区域的烟花中的32位(或者我猜的是gif ... barf),所以你可以看到下面的渐变 . 在这种情况下,渐变可以使用HEX RGB或RGBA .

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

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

  • 7

    这可以使用多种背景语法:

    .example3 {
        background-image: url(../images/plus.png), -moz-linear-gradient(top,  #cbe3ba,  #a6cc8b);
        background-image: url(../images/plus.png), -webkit-gradient(linear, left top, left bottom, from(#cbe3ba), to(#a6cc8b));
    }
    

    我在Here's One Solution读到了这个 .

  • 0

    透明图像还不是CSS标准,但大多数现代浏览器都支持它们 . 但是,这是W3C CSS3建议的一部分 . 实现因客户端而异,因此您必须使用多种语法来实现跨浏览器兼容性 .

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

相关问题