我如何使用CSS3渐变为我的背景颜色，然后应用背景图像应用某种轻透明纹理?
当前回答
我总是使用以下代码使其工作。这里有一些注意事项:
如果你把图片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 >
这种技术就像我们在这里描述的有多个背景图像一样
其他回答
我总是使用以下代码使其工作。这里有一些注意事项:
如果你把图片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等等。
如果你想要一个在中心只有一个背景图像的渐变，你可以用一行代码做到，像这样:
body {
background: url(logo.png) no-repeat fixed center center, linear-gradient(#00467f, #a5cc82) fixed;
}
我想让跨度按钮与背景图像，背景渐变组合。
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;
}
下面是我创建的一个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找到了最初的解决方案。
