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

How do I combine a background-image and CSS3 gradient on the same element?

提问by Ronald

How do I use CSS3 gradients for my background-colorand then apply a background-imageto apply some sort of light transparent texture?

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

回答by Gidgidonihah

Multiple backgrounds!

多重背景！

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

These 2 lines are the fallback for any browser that doesn't do gradients. See notes for stacking images only IE < 9 below.

这两行是任何不做渐变的浏览器的后备。请参阅下面有关仅 IE < 9 的堆叠图像的说明。

• Line 1 sets a flat background color.
• Line 2 sets the background image fallback.

• 第 1 行设置了平坦的背景颜色。
• 第 2 行设置背景图像后备。

The final line sets a background image and gradient for browsers that can handle them.

最后一行为可以处理它们的浏览器设置背景图像和渐变。

• Line 3 is for all relatively modern browsers.

• 第 3 行适用于所有相对现代的浏览器。

Nearly all current browsers have support for multiple background images and css backgrounds. See http://caniuse.com/#feat=css-gradientsfor browser support. For a good post on why you don't need multiple browser prefixes, see http://codepen.io/thebabydino/full/pjxVWp/

几乎所有当前的浏览器都支持多个背景图像和 css 背景。有关浏览器支持，请参阅http://caniuse.com/#feat=css-gradients。有关为什么不需要多个浏览器前缀的好帖子，请参阅http://codepen.io/thebabydino/full/pjxVWp/

Layer Stack

层堆栈

It should be noted that the first defined image will be topmost in the stack. In this case, the image is on TOP of the gradient.

应该注意的是，第一个定义的图像将位于堆栈的最顶部。在这种情况下，图像位于渐变的顶部。

For more information about background layering see http://www.w3.org/TR/css3-background/#layering.

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

Stacking images ONLY (no gradients in the declaration) For IE < 9

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

IE9 and up can stack images this same way. You could use this to create a gradient image for ie9, though personally, I wouldn't. However to be noted when using only images, ie < 9 will ignore the fallback statement and not show any image. This does not happen when a gradient is included. To use a single fallback image in this case I suggest using Paul Irish's wonderful Conditional HTML elementalong with your fallback code:

IE9 及更高版本可以以同样的方式堆叠图像。您可以使用它为 ie9 创建渐变图像，但就我个人而言，我不会。但是需要注意的是，仅使用图像时，即 < 9 将忽略回退语句并且不显示任何图像。包含渐变时不会发生这种情况。要在这种情况下使用单个后备图像，我建议使用 Paul Irish 的精彩条件 HTML 元素以及后备代码：

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

Background position, sizing etc.

背景位置，大小等。

Other properties that would apply to a single image may also be comma separated. If only 1 value is supplied, that will be applied to all stacked images including the gradient. background-size: 40px;will constrain both the image and the gradient to 40px height and width. However using background-size: 40px, cover;will make the image 40px and the gradient will cover the element. To only apply a setting to one image, set the default for the other: background-position: 50%, 0 0;or for browsers that support ituse initial: background-position: 50%, initial;

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

You may also use the background shorthand, however this removes the fallback color and image.

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

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

The same applies to background-position, background-repeat, etc.

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

回答by Tamás Pap

If you also want to set background positionfor your image, than you can use this:

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

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

or you can also create a LESS mixin (bootstrap style):

或者你也可以创建一个 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
    }
}

回答by Robert

One thing to realize is that the first defined background image is topmost in the stack. The last defined image will be bottommost. That means, to have a background gradient behind an image, you would need:

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

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

You could also define background positions and background size for the images. I put together a blog post about some interesting things you can do with CSS3 gradients

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

回答by Nejmeddine Jammeli

you could simply type :

你可以简单地输入：

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

回答by trungk18

I always use the following code to make it work. There are some notes:

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

1. If you place image URL before gradient, this image will be displayed abovethe gradient as expected.

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

2. 如果在图片 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>

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

这种技术与我们这里描述的多个背景图像相同

回答by Francesco Borzi

my solution:

我的解决方案：

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

回答by coreballs

I had an implementation where I needed to take this technique a step farther, and wanted to outline my work. The below code does the same thing but uses SASS, Bourbon, and an image sprite.

我有一个实现，我需要将这项技术更进一步，并想概述我的工作。下面的代码做同样的事情，但使用 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 and Bourbon take care of the cross browser code, and now all I have to declare is the sprite position per button. It is easy to extend this principal for the buttons active and hover states.

SASS 和 Bourbon 负责跨浏览器代码，现在我要声明的是每个按钮的精灵位置。很容易为按钮活动和悬停状态扩展这个原则。

回答by Mateusz

If you have strange errors with downloading background images use W3C Link checker: https://validator.w3.org/checklink

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

Here are modern mixins that I use (credits: PSA: don't use gradient generators):

以下是我使用的现代 mixin（学分：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);
}

回答by lukehillonline

Here is a MIXIN that I created to handle everything that people might like to use:

这是我创建的一个 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 */
}

This can be used like so:

这可以像这样使用：

.background-gradient-and-image (#f3f3f3, "../images/backgrounds/community-background.jpg", left, top, #fafcfd, #f2f2f2);

Hope you guys find this helpful.

希望你们觉得这有帮助。

credit to @Gidgidonihah for finding the initial solution.

感谢@Gidgidonihah 找到了最初的解决方案。

回答by Alex

I was trying to do the same thing. While background-color and background-image exist on separate layers within an object -- meaning they can co-exist -- CSS gradients seem to co-opt the background-image layer.

我试图做同样的事情。虽然 background-color 和 background-image 存在于一个对象内的不同层上——这意味着它们可以共存——但 CSS 渐变似乎与背景图像层结合在一起。

From what I can tell, border-image seems to have wider support than multiple backgrounds, so maybe that's an alternative approach.

据我所知，border-image 似乎比多个背景有更广泛的支持，所以也许这是另一种方法。

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

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

UPDATE: A bit more research. Seems Petra Gregorova has something working here --> http://petragregorova.com/demos/css-gradient-and-bg-image-final.html

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