如何在同一元素上组合背景图像和 CSS3 渐变? [英] How do I combine a background-image and CSS3 gradient on the same element?

问题描述

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

How do I use CSS3 gradients for my background-color and then apply a background-image to apply some sort of light transparent texture?

推荐答案

多背景！

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

这两行是任何不做渐变的浏览器的后备.请参阅仅堆叠图像的注释 IE <9 以下.

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

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

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

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

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

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

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

层堆栈

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

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.

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

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

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

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

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 element along with your fallback code:

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

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

这篇关于如何在同一元素上组合背景图像和 CSS3 渐变?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！