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

我以这种方式解决了问题。我在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%
}

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

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

其中xxxxxx对应于与最终渐变颜色匹配的颜色。

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

我想使用背景图像，背景渐变组合制作跨度按钮。

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

您可以使用多个背景：linear-gradient（）; 电话，但尝试以下操作：

如果您希望图像完全融合在一起，而由于单独的HTTP请求，元素看起来不会像单独加载一样，请使用此技术。在这里，我们要在同一元素上同时加载两件事……

只需确保先将预渲染的32位透明png图像/纹理转换为base64字符串，然后在background-image 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");
 }

我试图做同样的事情。虽然背景颜色和背景图像存在于对象内的不同层上（这意味着它们可以共存），但CSS渐变似乎使背景图像层成为共同点。

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

http://articles.sitepoint.com/article/css3-border-images

更新：更多研究。似乎佩特拉·格雷戈洛娃（Petra Gregorova）在这里有工作-> http://petragregorova.com/demos/css-gradient-and-bg-image-final.html

这是我创建的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查找初始解决方案。

您可以简单地输入：

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

我的解决方案：

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

要实现的一件事是，第一个定义的背景图像在堆栈中位于最顶层。最后定义的图像将在最底部。这意味着，要使图像后面具有背景渐变，您需要：

  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渐变可以做的有趣事情的博客文章