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

  •   CSS 中文开发手册

    背景图片 | 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

    适用元素

    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 中文开发手册
    转载请保留页面地址:https://www.breakyizhan.com/css/32237.html

    posted on 2020-07-03 23:44  MrAit  阅读(414)  评论(0编辑  收藏  举报

    导航