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

如何使用 CSS3 渐变作为background-color ，然后应用background-image以应用某种透光的纹理？

css background-image gradient

多个背景！

body {
  background: #eb01a5;
  background-image: 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/

层堆叠

应当注意，第一个定义的图像将在堆栈中位于最顶层。在这种情况下，图像位于渐变的 TOP 上。

有关背景分层的更多信息，请参见http://www.w3.org/TR/css3-background/#layering 。

仅堆叠图像（声明中没有渐变）对于 IE <9

IE9 及更高版本可以以相同方式堆叠图像。您可以使用它为 ie9 创建一个渐变图像，尽管我个人不会。但是要注意的是，仅使用图像时，即 < 9 将忽略后备语句，并且不显示任何图像。当包含渐变时，不会发生这种情况。在这种情况下，要使用单个后备图像，建议您将 Paul Irish 的出色的Conditional HTML 元素与后备代码一起使用：

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

背景位置，背景重复等也是如此。

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

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

或者，您也可以创建 LESS mixin（引导程序样式）：

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

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

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 渐变可以做的一些有趣的事情

您可以简单地输入：

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

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

如果将图像 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>

如果将渐变放置在图像 URL 之前，则该图像将显示在渐变下方。

.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>

这种技术与我们在此处描述的具有多个背景图像的方式相同

我的解决方案：

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

我有一个实现，需要进一步推广这种技术，并希望概述我的工作。以下代码执行相同的操作，但使用 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 负责跨浏览器代码，现在我需要声明的只是每个按钮的精灵位置。对于按钮的活动状态和悬停状态，可以很容易地扩展此主体。

如果您在下载背景图片时遇到奇怪的错误，请使用 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%); // 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);
}

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

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

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

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

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

答案