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

问题描述

如何对我的背景颜色使用CSS3渐变，然后应用 background-image

b

b >

  body {background：＃eb01a5; background-image：url（IMAGE_URL）; / * fallback * / background-image：url（IMAGE_URL），linear-gradient（＃eb01a5，＃d13531）; / * W3C * /}  

这两行是任何不做渐变的浏览器。
参见仅用于堆叠图像的注释IE<

• 第1行设置平坦的背景颜色。


• 第2行设置背景图片后退。

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

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

http://caniuse.com/#feat=css-gradients =nofollow noreferrer> http://caniuse.com/#feat=css-gradients 了解浏览器支持和前缀。有关为什么不需要多个浏览器字首的详细信息，请参阅 http://codepen.io / thebabydino / full / pjxVWp /

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

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

IE9及以上版本可以以同样的方式堆叠图片。你可以使用它为ie9创建一个渐变图像，虽然个人，我不会。然而，当仅使用图像时， 9将忽略后备语句，并且不显示任何图像。当包含渐变时，不会发生这种情况。要在这种情况下使用单个后备图片，建议您使用Paul Irish的精彩条件HTML元素以及您的后备代码：

  .lte9 #target {background-image：url（IMAGE_URL）; } 
  

背景位置，大小等 b

适用于单个图像的其他属性也可以用逗号分隔。如果仅提供1个值，则将应用于包括渐变的所有堆叠图像。 background-size：40px; 将约束图像和渐变为40px高度和宽度。但是，使用 background-size：40px，cover; 会使图像变成40px，渐变将覆盖该元素。

同样适用于background-position，background-repeat等。

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

解决方案

Yes, it is.

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.

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

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

• Line 3 is for all relatively modern browsers.

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

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

Stacking images ONLY (no gradients in the declaration) For 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 element along with your fallback code:

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

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

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