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

我如何为我的background-color使用CSS3渐变，然后应用background-image来应用某种轻透明纹理？

1039527 次浏览
小开
最佳答案

多种背景！

body {background: #eb01a5;background-image: url("IMAGE_URL"); /* fallback */background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); /* W3C */}

这2行是任何不做渐变的浏览器的后备。请参阅仅堆叠图像的注释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将忽略回退语句，不显示任何图像。当包含渐变时，这种情况不会发生。在这种情况下，要使用单个回退图像，我建议使用保罗·爱尔兰精彩的条件超文本标记语言元素和你的回退代码：

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

背景位置，尺寸等。

适用于单个图像的其他属性也可以用逗号分隔。如果仅提供1个值，则将应用于包括渐变在内的所有堆叠图像。background-size: 40px;将限制图像和渐变高度和宽度为40px。但是使用background-size: 40px, cover;将使图像为40px，渐变将覆盖元素。要仅将设置应用于一张图像，请为另一张图像设置默认值：background-position: 50%, 0 0;或支持它的浏览器使用initial：background-position: 50%, initial;

您也可以使用背景速记，但这会删除后备颜色和图像。

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

这同样适用于背景位置，背景重复等。

小开

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

  body {background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), linear-gradient(red, yellow);background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -webkit-gradient(linear, left top, left bottom, from(red), to(yellow));background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -moz-linear-gradient(top, red, yellow);}

您还可以为图像定义背景位置和背景大小。我整理了一篇关于你可以用CSS3渐变做的一些有趣的事情的博客文章

小开

我试图做同样的事情。虽然背景颜色和背景图像存在于对象中的单独图层上——这意味着它们可以共存——但CSS渐变似乎共同选择了背景图像层。

据我所知，边框图像似乎比多种背景有更广泛的支持，所以也许这是一种替代方法。

更新：更多的研究。似乎Petra Gregorova在这里有一些工作->http://petragregorova.com/demos/css-gradient-and-bg-image-final.html

小开

我用这种方法解决了这个问题。我用超文本标记语言定义渐变，并在主体中定义背景图像

html {background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0.31, rgb(227, 227, 227)), color-stop(0.66, rgb(199, 199, 199)), color-stop(0.83, rgb(184, 184, 184)));background-image: -moz-linear-gradient(left bottom, rgb(227, 227, 227) 31%, rgb(199, 199, 199) 66%, rgb(184, 184, 184) 83%);height: 100%}body {background: url("http://www.skrenta.com/images/stackoverflow.jpg");height: 100%}

小开

作为一种确定的方法，您可以在css使用中制作一个背景图像，即500x5像素：

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

其中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负责跨浏览器代码，现在我要声明的是每个按钮的精灵位置。很容易为按钮的活动和悬停状态扩展这个主体。

小开

如果您还想为图像设置背景位置，则可以使用以下命令：

background-color: #444; // fallbackbackground: 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.10background: url('PATH-TO-IMG') center center no-repeat, linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10

或者您也可以创建一个LESS混合（引导样式）：

#gradient {.vertical-with-image(@startColor: #555, @endColor: #333, @image) {background-color: mix(@startColor, @endColor, 60%); // fallbackbackground-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.10background: @image, linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10}}
小开

如果您必须在IE 9（超文本标记语言5&超文本标记语言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非常有帮助。

小开

这是我创建的一个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找到了最初的解决方案。

小开

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

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

您可以简单地键入：

background: linear-gradient(to bottom,rgba(0,0,0, 0),rgba(0,0,0, 100)),url(../images/image.jpg);

小开

对于我的响应式设计，我在盒子右侧的下拉框向下箭头（垂直手风琴），接受百分比作为位置。最初向下箭头是“位置：绝对；正确：13px；”。在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 );

P. S.对不起，不知道如何处理过滤器。

小开

我的解决方案：

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);
小开

我总是使用以下代码来使其工作。有一些注释：

  1. 如果您将图像URL放在渐变之前，则此图像将按预期显示上面渐变。

.background-gradient {background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%);background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-gradient(135deg, #6ec575 0, #3b8686 100%);background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%);background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%);background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%);background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, linear-gradient(135deg, #6ec575 0, #3b8686 100%);height: 500px;width: 500px;}
<div class="background-gradient"></div>

  1. If you place gradient before image URL, this image will be displayed under the gradient.

.background-gradient {background: -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;background: -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;background: -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;background: -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;background: linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;width: 500px;height: 500px;}
<div class="background-gradient"></div>

This technique is just the same as we have multiple background images as describe here

小开

如果您在下载背景图像时遇到奇怪的错误，请使用W3C链接检查器：https://validator.w3.org/checklink

以下是我使用的现代混音（学分：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%); // fallbackbackground-image: url("@{img-folder}/@{imageName}?v=@{version}"); // fallbackbackground: 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-6background: 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);}
小开

您可以使用多个background： line-梯度（）；调用，但请尝试以下操作：

如果您希望图像完全融合在一起，看起来不像是由于单独的HTTP请求而单独加载的元素，那么请使用此技术。

只需确保首先将预渲染的32位透明png图像/纹理转换为base 64字符串，并在背景图像css调用中使用它（在本例中代替INSERTIMAGEBLOBhere）。

我使用这种技术来融合晶圆状纹理和其他图像数据，这些数据使用标准的rgba透明度/线性渐变css规则序列化。比分层多个艺术和浪费HTTP请求更好，这对移动设备不利。一切都在客户端加载，不需要文件操作，但确实增加了文档字节大小。

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

使用background-blend-mode和rgba混合背景图像和颜色

这就是你所需要的：

.myblendedbg {background-image: url("some_image.png");background-color: rgba(0, 0, 0, 0.85); /* use rgba for fine adjustments */background-blend-mode: multiply;}

如果调整rgba颜色值的alpha值（在示例中为.85），则可以控制透明度。

此外，#0还有其他值，您可以使用它们来获得一些真正有创意的结果。

注：background-blend-mode: color;在Firefox上失败，而multiply适用于所有现代浏览器

小开

这是一个带有渐变覆盖的背景图像，26%是不透明度，7deg是渐变位置

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')`,

提交答案