背景图片 | background-image (Backgrounds & Borders) - CSS 中文开发手册 - Break易站

背景图片 | background-image (Backgrounds & Borders) - CSS 中文开发手册

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-clip和background-originCSS属性定义。

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

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

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

语法

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

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

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是一个关键字表示没有图像。是表示要显示的图像。可以有几个，用逗号分隔，因为支持多个背景。

正式语法

#where 
 = none | 
where 
 =  |  |  |  |  | 
where 
 = image( [ [  |  ]? , ? ]! )
 = image-set( # )
 = element(  )
 = cross-fade(  , ? )
 =  |  |  | 
where 
 =  |  |  |  |  |  | currentcolor |  = [  |  ]  = ? &&  =  |  = linear-gradient( [  | to  ]? ,  )
 = repeating-linear-gradient( [  | to  ]? ,  )
 = radial-gradient( [  ||  ]? [ at  ]? ,  )
 = repeating-radial-gradient( [  ||  ]? [ at  ]? ,  )
where 
 = rgb( [ [ {3} | {3} ] [ /  ]? ] | [ [ #{3} | #{3} ] , ? ] )
 = rgba( [ [ {3} | {3} ] [ /  ]? ] | [ [ #{3} | #{3} ] , ? ] )
 = hsl( [  [ /  ]? ] | [ , , , ? ] )
 = hsla( [  [ /  ]? ] | [ , , , ? ] )
 = [ left | right ] || [ top | bottom ]
 = #{2,}
 = circle | ellipse
 = closest-side | farthest-side | closest-corner | farthest-corner |  | {2}
 = [[ left | center | right | top | bottom |  ] | [ left | center | right |  ] [ top | center | bottom |  ] | [ center | [ left | right ] ? ] && [ center | [ top | bottom ] ? ]]

where 
 =  |  =  | 
 = ?
 =  | 

示例

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

HTML

  

    This paragraph is full of cats
and stars.
  
  
This paragraph is not.
  

    Here are more cats for you.
Look at them!
  
  
And no more.

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

结果

规范

浏览器兼容性

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

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