多个背景!

身体{ 背景:# 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 ); 

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

我想让跨度按钮与背景图像，背景渐变组合。

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;
}

多个背景!

身体{ 背景:# 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等等。

我希望这是跨浏览器的:

(修改了从渐变编辑器的基础，黑色到透明的垂直渐变在图像的顶部)

    background-image: url('YOURIMAGE.JPG');
    background-image: -moz-linear-gradient(left,  rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%),url('YOURIMAGE.JPG'); /* FF3.6-15 */
    background-image: -webkit-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%),url('YOURIMAGE.JPG'); /* Chrome10-25,Safari5.1-6 */
    background-image: linear-gradient(to right,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%),url('YOURIMAGE.JPG'); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 ), progid:DXImageTransform.Microsoft.AlphaImageLoader(src='YOURIMAGE.JPG', sizingMethod='crop'); /* IE6-9 */

如果你有奇怪的错误下载背景图像使用W3C链接检查:https://validator.w3.org/checklink

以下是我使用的现代mixin (credit: PSA:不要使用梯度生成器):

.buttonAkc
{
    .gradientBackground(@imageName: 'accept.png');
    background-repeat: no-repeat !important;
    background-position: center right, top left !important;
}

.buttonAkc:hover
{
    .gradientBackgroundHover('accept.png');
}

.gradientBackground(@startColor: #fdfdfd, @endColor: #d9d9db, @imageName)
{
    background-color: mix(@startColor, @endColor, 60%); // fallback
    background-image: url("@{img-folder}/@{imageName}?v=@{version}"); // fallback
    background: url("@{img-folder}/@{imageName}?v=@{version}") no-repeat scroll right center, -webkit-linear-gradient(top, @startColor 0%, @endColor 100%) no-repeat scroll left top; // Chrome 10-25, Safari 5.1-6
    background: url("@{img-folder}/@{imageName}?v=@{version}") no-repeat scroll right center, linear-gradient(to bottom, @startColor 0%, @endColor 100%) no-repeat scroll left top;
}

.gradientBackgroundHover(@imageName)
{
    .gradientBackground(#fdfdfd, #b5b6b9, @imageName);
}