这是一个渐变叠加的背景图片，26%是不透明度，7度是渐变位置

CSS梯度生成器

backgroundImage: `linear-gradient(7deg, rgba(2,0,36,1) 0%, rgba(39,17,68,1) 26%, rgba(10,19,20,0.49343487394957986) 100%), url('backgroundImg.jpeg')`,

我总是使用以下代码使其工作。这里有一些注意事项:

如果你把图片URL放在渐变前面，这张图片将会显示在渐变上面。

.background-gradient { 背景:url('http://trungk18.github.io/img/trungk18.png') no-repeat， -moz-linear-gradient(135deg， #6ec575 0， #3b8686 100%); 背景:url('http://trungk18.github.io/img/trungk18.png') no-repeat， -webkit-gradient(135deg， #6ec575 0， #3b8686 100%); 背景:url('http://trungk18.github.io/img/trungk18.png') no-repeat， -webkit-linear-gradient(135deg， #6ec575 0， #3b8686 100%); 背景:url('http://trungk18.github.io/img/trungk18.png') no-repeat， -o-linear-gradient(135deg， #6ec575 0， #3b8686 100%); 背景:url('http://trungk18.github.io/img/trungk18.png') no-repeat， -ms-linear-gradient(135deg， #6ec575 0， #3b8686 100%); 背景:url('http://trungk18.github.io/img/trungk18.png')无重复，线性梯度(135deg， #6ec575 0， #3b8686 100%); 身高:500 px; 宽度:500 px; ｝ < div class = " background-gradient " > < / div >

如果你把渐变放在图片URL之前，这张图片会显示在渐变下面。

.background-gradient { 背景:-moz-linear-gradient(135deg， #6ec575 0， #3b8686 100%)， url('http://trungk18.github.io/img/trungk18.png') no-repeat; Background: -webkit-gradient(135deg， #6ec575 0， #3b8686 100%)， url('http://trungk18.github.io/img/trungk18.png') no-repeat; 背景:-webkit-linear-gradient(135deg， #6ec575 0， #3b8686 100%)， url('http://trungk18.github.io/img/trungk18.png') no-repeat; 背景:-o-linear-gradient(135deg， #6ec575 0， #3b8686 100%)， url('http://trungk18.github.io/img/trungk18.png') no-repeat; 背景:-ms-linear-gradient(135deg， #6ec575 0， #3b8686 100%)， url('http://trungk18.github.io/img/trungk18.png') no-repeat; 背景:线性梯度(135deg， #6ec575 0， #3b8686 100%)， url('http://trungk18.github.io/img/trungk18.png') no-repeat; 宽度:500 px; 身高:500 px; ｝ < div class = " background-gradient " > < / div >

这种技术就像我们在这里描述的有多个背景图像一样

多个背景!

身体{ 背景:# eb01a5; 背景图片:url(“IMAGE_URL”);/* fallback */ background-image: url("IMAGE_URL")， linear-gradient(#eb01a5， #d13531);/* w3c */ ｝

这两行代码是任何不支持渐变的浏览器的备用代码。 请参阅下面仅对IE < 9的图像进行堆叠的说明。

第1行设置平坦的背景色。 第2行设置背景图像回退。

最后一行为能够处理它们的浏览器设置背景图像和渐变。

第3行适用于所有相对现代的浏览器。

目前几乎所有的浏览器都支持多背景图片和css背景。有关浏览器支持，请参阅http://caniuse.com/#feat=css-gradients。有关为什么不需要多个浏览器前缀的好文章，请参阅http://codepen.io/thebabydino/full/pjxVWp/

层堆栈

应该注意的是，第一个定义的图像将位于堆栈的最上面。在这种情况下，图像是在梯度的顶部。

有关背景分层的更多信息，请参阅http://www.w3.org/TR/css3-background/#layering。

仅堆叠图像(声明中没有梯度)对于IE < 9

IE9及以上版本可以以同样的方式堆叠图像。你可以用它来为ie9创建渐变图像，不过我个人不会这么做。但是需要注意的是，当只使用图像时，ie < 9将忽略回退语句，不显示任何图像。当包含渐变时，这种情况不会发生。在这种情况下，我建议使用Paul Irish的条件HTML元素和你的后退代码:

.lte9 #target{ background-image: url("IMAGE_URL"); }

背景位置，大小等。

应用于单个图像的其他属性也可以用逗号分隔。如果只提供了一个值，它将应用于所有堆叠图像，包括渐变。background-size: 40像素;将图像和梯度约束为40px的高度和宽度。然而使用background-size: 40px，覆盖;将图像设置为40px，渐变将覆盖该元素。若要只对一张图像应用设置，请为另一张图像设置默认值:background-position: 50%， 0 0;或者对于支持它的浏览器，使用initial: background-position: 50%， initial;

您也可以使用背景简写，但这将删除备用颜色和图像。

body{
    background: url("IMAGE_URL") no-repeat left top, linear-gradient(#eb01a5, #d13531);
}

这同样适用于background-position, background-repeat等等。

对于我的响应式设计，我的下拉框在框的右侧(垂直手风琴)，接受百分比作为位置。最初，下箭头是“位置:绝对;右:13 px;”。在97%的定位下，它的工作原理如下:

> background: #ffffff;
> background-image: url(PATH-TO-arrow_down.png); /*fall back - IE */
> background-position: 97% center; /*fall back - IE */
> background-repeat: no-repeat; /*fall back - IE */
> background-image: url(PATH-TO-arrow_down.png)  no-repeat  97%  center;  
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%); 
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea)); 
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%); 
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);<br />
> filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 ); 

附注:对不起，我不知道如何处理滤镜。

我有一个实现，我需要把这个技术更进一步，并想概述我的工作。下面的代码做同样的事情，但使用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负责跨浏览器代码，现在我所要声明的就是每个按钮的精灵位置。很容易将此原则扩展到按钮的活动状态和悬停状态。

如果你必须在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非常有帮助。