如何在同一元素上组合背景图像和CSS3渐变？

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

如何使用CSS3渐变作为background-color ，然后应用background-image以应用某种透光的纹理？

#1楼

我有一个实现，需要进一步推广这种技术，并希望概述我的工作。以下代码执行相同的操作，但使用SASS，Bourbon和图像精灵。

    @mixin sprite($position){
        @include background(url('image.png') no-repeat ($position), linear-gradient(#color1, #color2));
    }
    a.button-1{
        @include sprite(0 0);
    }
    a.button-2{
       @include sprite (0 -20px);  
    }
    a.button-2{
       @include sprite (0 -40px);  
    }

SASS和Bourbon负责跨浏览器代码，现在我需要声明的只是每个按钮的精灵位置。对于按钮的活动状态和悬停状态，可以很容易地扩展此主体。

#2楼

如果您还想设置图像的背景位置 ，则可以使用以下方法：

background-color: #444; // fallback
background: url('PATH-TO-IMG') center center no-repeat; // fallback

background: url('PATH-TO-IMG') center center no-repeat, -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background: url('PATH-TO-IMG') center center no-repeat, -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
background: url('PATH-TO-IMG') center center no-repeat, linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10

或者，您也可以创建LESS mixin（引导程序样式）：

#gradient {
    .vertical-with-image(@startColor: #555, @endColor: #333, @image) {
        background-color: mix(@startColor, @endColor, 60%); // fallback
        background-image: @image; // fallback

        background: @image, -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
        background: @image, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
        background: @image, -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
        background: @image, -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
        background: @image, linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
    }
}

#3楼

如果必须在IE 9（HTML 5和HTML 4.01 Strict）中同时使用渐变和背景图像，则将以下属性声明添加到CSS类中，它应该可以解决问题：

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#000000', endColorstr='#ff00ff'), progid:DXImageTransform.Microsoft.AlphaImageLoader(src='[IMAGE_URL]', sizingMethod='crop');

请注意，您使用了filter属性，并且在用分号关闭属性值之前，有两个progid:[val]实例用逗号隔开。这是小提琴。还要注意，当您观看小提琴时，渐变会超出圆角。我没有解决不使用圆角的其他问题。还要注意，在src [IMAGE_URL]属性使用相对路径时，该路径是相对于文档页面，而不是的CSS文件（参见源）。

本文（ http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/ ）是导致我采用此解决方案的原因。对于特定于IE的CSS3很有帮助。

#4楼

这是我创建的MIXIN，用于处理人们可能喜欢使用的所有内容：

.background-gradient-and-image (@fallback, @imgUrl, @background-position-x, @background-position-y, @startColor, @endColor) {
    background: @fallback;
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat; /* fallback */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -webkit-gradient(linear, left top, left bottom, from(@startColor) @background-position-x @background-position-y no-repeat, to(@endColor)); /* Saf4+, Chrome */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -webkit-linear-gradient(top, @startColor, @endColor); /* Chrome 10+, Saf5.1+ */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,    -moz-linear-gradient(top, @startColor, @endColor); /* FF3.6+ */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,     -ms-linear-gradient(top, @startColor, @endColor); /* IE10 */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,      -o-linear-gradient(top, @startColor, @endColor); /* Opera 11.10+ */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,         linear-gradient(top, @startColor, @endColor); /* W3C */
}

可以这样使用：

.background-gradient-and-image (#f3f3f3, "../images/backgrounds/community-background.jpg", left, top, #fafcfd, #f2f2f2);

希望对您有所帮助。

感谢@Gidgidonihah查找初始解决方案。

#5楼

我想用背景图像，背景渐变组合制作跨度按钮。

http://enjoycss.com/帮助完成了我的工作任务。只有我必须删除一些自动生成的其他CSS。但是，这是一个非常不错的网站，可帮助您轻松完成工作。

#nav a.link-style span {
    background: url("../images/order-now-mobile.png"), -webkit-linear-gradient(0deg, rgba(190,20,27,1) 0, rgba(224,97,102,1) 51%, rgba(226,0,0,1) 100%);
    background: url("../images/order-now-mobile.png"), -moz-linear-gradient(90deg, rgba(190,20,27,1) 0, rgba(224,97,102,1) 51%, rgba(226,0,0,1) 100%);
    background: url("../images/order-now-mobile.png"), linear-gradient(90deg, rgba(170,31,0,1) 0, rgba(214,18,26,1) 51%, rgba(170,31,0,1) 100%);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border-radius: 8px;
    border: 3px solid #b30a11;
}

来源：oschina

链接：https://my.oschina.net/stackoom/blog/3141440

标签

Sass

bourbon