CSS-背景图片 | background-image

background-image CSS属性的元件上设置一个或多个背景图像。

/* Single value */
background-image: url('https://example.com/bck.png');

/* Multiple values */
background-image: url('https://example.com/top.png'), url('https://example.com/bottom.png');

/* Keyword value */
background-image: none;

/* Global values */ 
background-image: inherit;
background-image: initial;
background-image: unset;

背景图像在堆叠上下文层上绘制。指定的第一个图层被绘制为与用户最接近。

元素的边界然后被绘制在它们的顶部,然后被background-color绘制在它们下面。如何绘制图像相对于框和它的边界由background-clipbackground-originCSS属性定义。

如果无法绘制指定的图像(例如,无法加载指定的URI所指示的文件),那么浏览器会像处理none值一样处理它。

注意:即使图像不透明,在正常情况下也不会显示颜色,Web开发人员应该始终指定一个background-color。如果图像无法加载 - 例如,当网络关闭时,背景颜色将被用作回退。

双引号失败时,单引号可能会绕过URL。

初始值

none

适用元素

all elements. It also applies to ::first-letter and ::first-line.

是否是继承属性

no

适用媒体

visual

计算值

as specified, but with url values made absolute

Animation type

discrete

正规顺序

the unique non-ambiguous order defined by the formal grammar

语法

每个背景图像被指定为关键字none<image>值。

要指定多个背景图片,请提供多个值,并用逗号分隔:

background-image:
  linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
  url('https://mdn.mozillademos.org/files/7693/catfront.png');

none是一个关键字表示没有图像。<image><image>表示要显示的图像。可以有几个,用逗号分隔,因为支持多个背景。

正式语法

<bg-image>#where 
<bg-image> = none | <image>
where 
<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>
where 
<image()> = image( [ [ <image> | <string> ]? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>
where 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
where 
<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = <color-stop>#{2,}
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
<position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]

where 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<color-stop> = <color> <length-percentage>?
<length-percentage> = <length> | <percentage>

示例

请注意,星形图像是部分透明的,并在cat图像上分层。

HTML

<div>
  <p class="catsandstars">
    This paragraph is full of cats<br />and stars.
  </p>
  <p>This paragraph is not.</p>
  <p class="catsandstars">
    Here are more cats for you.<br />Look at them!
  </p>
  <p>And no more.</p>
</div>

CSS

p {
  font-size: 1.5em;
  color: #FE7F88;
  background-image: none;
  background-color: transparent;
}

div {
  background-image:
      url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
}

.catsandstars {
  background-image:
      url("https://mdn.mozillademos.org/files/11991/startransparent.gif"), 
      url("https://mdn.mozillademos.org/files/7693/catfront.png");
  background-color: transparent;
}

结果

规范

Specification

Status

Comment

CSS Backgrounds and Borders Module Level 3The definition of 'background-image' in that specification.

Candidate Recommendation

From CSS2 Revision 1, the property has been extended to support multiple backgrounds and any <image> CSS data type.

CSS Level 2 (Revision 1)The definition of 'background-image' in that specification.

Recommendation

From CSS1, the way images with and without intrinsic dimensions are handled is now described.

CSS Level 1The definition of 'background-image' in that specification.

Recommendation

Initial definition.

浏览器兼容性

Feature

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

Basic Support

1

12

1.01

4

3.5

1.0

Multiple backgrounds

1.0

12

3.6

9.0

(Yes)

1.3

Gradients

1.02

12

3.63

10

114

4.02

SVG images

8.0

12

4.0

9.0

9.5

5.05

element()

No

No

(Yes)6

No

No

No

image-rect()

No

No

(Yes) -moz- 7

No

No

No

Any <image> value

(Yes)

?

No

?

?

?

Feature

Android

Chrome for Android

Edge mobile

Firefox for Android

IE mobile

Opera Android

iOS Safari

Basic Support

(Yes)

(Yes)

(Yes)

(Yes)

(Yes)

(Yes)

(Yes)

Multiple backgrounds

(Yes)

(Yes)

(Yes)

(Yes)

(Yes)

(Yes)

(Yes)

Gradients

(Yes)

(Yes)2

(Yes)

(Yes)3

(Yes)

(Yes)4

(Yes)2

SVG images

No

(Yes)

(Yes)

(Yes)

(Yes)

(Yes)

5.05

element()

No

No

No

(Yes)6

No

No

No

image-rect()

No

No

No

(Yes) -moz- 7

No

No

No

Any <image> value

(Yes)

(Yes)

?

No

?

?

?

1. 如果browser.display.use_document_colors用户偏好about:config设置为false,则不会显示背景图像。

2. 某些版本仅支持以-webkit-moz,或为-o前缀的实验性渐变。

上一篇:CSS-背景图片位置 | background-position


下一篇:python 十六进制转换十进制(MAC 转换 IP 地址)