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

如何使用CSS3渐变作为我的

背景色

，然后应用

背景图像

来应用某种浅透明纹理？

多个背景

正文{
背景：#eb01a5；
背景图像：url（“图像url”）；/*回退*/
背景图像：url（“图像url”），线性渐变（#eb01a5，#d13531）；/*W3C*/
}

需要意识到的一件事是，第一个定义的背景图像是堆栈中最上面的。最后定义的图像将是最底部的。这意味着，要在图像后面设置背景渐变，您需要：

正文{
背景图像：url（“http://www.skrenta.com/images/stackoverflow.jpg“”，线性梯度（红色、黄色）；
背景图像：url（“http://www.skrenta.com/images/stackoverflow.jpg“”，-webkit渐变（线性、左上、左下、从（红色）到（黄色））；
背景图像：url（“http://www.skrenta.com/images/stackoverflow.jpg“”，-moz线性梯度（顶部、红色、黄色）；
}

我也在尝试做同样的事情。虽然背景颜色和背景图像存在于一个对象中的不同层上，这意味着它们可以共存，但CSS渐变似乎会选择背景图像层

据我所知，边界图像似乎比多个背景有更广泛的支持，所以这可能是另一种方法

---

更新：更多的研究。佩特拉·格雷戈洛娃似乎有什么办法-->

我就是这样解决问题的。我在HTML中定义渐变，在正文中定义背景图像

html{
背景图像：-webkit渐变（线性，左下，右上，颜色停止（0.31，rgb（227，227，227）），颜色停止（0.66，rgb（199，199，199）），颜色停止（0.83，rgb（184，184，184））；
背景图像：-莫兹线性梯度（左下角，rgb（227227227）31%，rgb（199199199199）66%，rgb（184184184）83%）；
身高：100%
}
身体{
背景：url（“http://www.skrenta.com/images/stackoverflow.jpg");
身高：100%
}

作为一种可靠的方法，您只需在

css

中制作一个500x5像素的背景图像，使用：

background-img:url(bg.jpg) fixed repeat-x;
background:#<xxxxxx>;

backgroundimg:url（bg.jpg）固定重复-x；
背景：#；

其中，

xxxxxx

对应与最终渐变颜色匹配的颜色

---

您还可以将其固定在屏幕底部，并使其与初始渐变颜色匹配。

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

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

背景色：#444；//退路 背景：url（'PATH-TO-IMG'）中心不重复；//退路 背景：url（'PATH-TO-IMG'）中心不重复，-moz线性渐变（顶部，@startColor，@endColor）；//FF 3.6+ 背景：url（'PATH-TO-IMG'）中心不重复，-webkit渐变（线性，0,0,100%，从（@startColor）到（@endColor））；//Safari 4+，Chrome 2+ 背景：url（'PATH-TO-IMG'）中心不重复，-webkit线性渐变（顶部，@startColor，@endColor）；//Safari 5.1+，铬合金10+ 背景：url（'PATH-TO-IMG'）中心不重复，-o-linear-gradient（顶部，@startColor，@endColor）；//歌剧11.10 背景：url（'PATH-TO-IMG'）中心不重复，线性渐变（到底部，@startColor，@endColor）；//标准，IE10 或者，您也可以创建较少的混合（引导式）：

#渐变{
.与图像垂直（@startColor:#555，@endColor:#333，@image）{
背景色：混合（@startColor，@endColor，60%）；//后退
背景图像：@image；//回退
背景：@image，-moz线性渐变（顶部，@startColor，@endColor）；//FF 3.6+
背景：@image，-webkit渐变（线性，0,0,100%，从（@startColor）到（@endColor））；//Safari 4+，Chrome 2+
背景：@image，-webkit线性渐变（顶部，@startColor，@endColor）；//Safari 5.1+，Chrome 10+
背景：@image，-o-linear-gradient（顶部，@startColor，@endColor）；//Opera 11.10
背景：@图像，线性渐变（到底部，@startColor，@endColor）；//标准，IE10
}
}

如果您必须在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');

请注意，您使用了

过滤器

属性，并且在使用分号关闭属性值之前，

progid:[val]

有两个实例以逗号分隔。这是我的建议。还请注意，当您查看小提琴时，渐变延伸到圆角之外。我没有其他不使用圆角的修复方法。还请注意，在src[IMAGE_URL]属性中使用相对路径时，该路径是相对于文档页面而不是css文件的（请参阅）

---

这篇文章（）就是我找到这个解决方案的原因。这对于IE特定的CSS3非常有用。

我创建了一个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);

希望你们觉得这有帮助

---

感谢@gidonihah找到了初始解决方案。

我想用背景图像、背景梯度组合制作span按钮

帮助我完成工作任务。只有我必须删除一些自动生成的附加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;
}

---

您只需键入：

背景：线性渐变(
归根结底，
rgba（0,0,0,0），
rgba（0,0,0100）
)，url（../images/image.jpg）用于我的响应
> 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 ); 

background-image: url(IMAGE_URL); /* fallback */

background-image: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%), url(IMAGE_URL);

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

 div.imgDiv   {
      background: linear-gradient(to right bottom, white, rgba(255,255,255,0.95), rgba(255,255,255,0.95), rgba(255,255,255,0.9), rgba(255,255,255,0.9), rgba(255,255,255,0.85), rgba(255,255,255,0.8) );
      background-image: url("data:image/png;base64,INSERTIMAGEBLOBHERE");
 }

body {
  background:  url(logo.png) no-repeat fixed center center, linear-gradient(#00467f, #a5cc82) fixed;
}

    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 */