CSS-背景 | background

2022-03-12 15:27:15

CSS background速记属性允许您一次调整所有可用的背景样式选项，包括彩色图像，原点和大小，重复方法以及其他功能。background可用于对一个或多个设置值：background-clip，background-color，background-image，background-origin，background-position，background-repeat，background-size，和background-attachment。

/* Using a <background-color> */
background: green;

/* Using a <bg-image> and <repeat-style> */
background: url("test.jpg") repeat-y;

/* Using a <box> and <background-color> */
background: border-box red;

/* A single image, centered and scaled */
background: no-repeat center/80% url("../img/image.png");

backgroundCSS简写属性明确分配给定的值，并设置缺少的属性为初始值。

初始值

作为简写的每个属性：background-image：none background-position：0％0％background-size：auto auto background-repeat：repeat background-origin：padding-box background-clip：border-box background-attachment ：滚动背景颜色：透明

适用于

所有元素。它也适用于:: first-letter和:: first-line。

遗传

没有

百分比

作为简写的每个属性：background-position：指背景定位区域的大小减去背景图像的大小; 大小是指水平偏移的宽度和垂直偏移的高度background-size：相对于背景定位区域

媒体

视觉

计算值

作为速记的每个属性：background-image：如指定的那样，但url值被设置为absolute-background-position：一个列表，每个项目由两个关键字组成，这两个关键字分别代表原点和来自该原点的两个偏移量，每个偏移量都以绝对值长度（如果给定<length>），否则为百分比background-size：按照指定，但相对长度转换为绝对长度background-repeat：列表，每个项目由两个关键字组成，每个维度一个background-origin：如指定background-clip：指定background-attachment：指定background-color：计算颜色

动画类型

作为简写的每个属性：background-color：一种颜色background-image：离散background-clip：离散background-position：长度，百分比或calc的简单列表的可重复列表background-size：简单列表的可重复列表长度，百分比或计算背景重复：离散背景附件：离散

规范的顺序

出现在价值形式语法中的顺序
  • background-image: none
  • background-position: 0% 0%
  • background-size: auto auto
  • background-repeat: repeat
  • background-origin: padding-box
  • background-clip: border-box
  • background-attachment: scroll
  • background-color: transparent 
Applies to all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line).   [Inherited](inheritance) no   Percentages as each of the properties of the shorthand:
  • background-position：指背景定位区域的大小减去背景图像的大小; 大小是指水平偏移的宽度和垂直偏移的高度
  • background-size：相对于背景定位区域
Media visual   [Computed value](computed_value) as each of the properties of the shorthand:
  • background-image：如指定的那样，但是具有url绝对值
  • background-position：一个列表，每个项目由两个关键字组成，代表原点和来自该原点的两个偏移量，每个以绝对长度给出（如果给定 <length>），否则以百分比
  • background-size：按照规定，但相对长度转换为绝对长度
  • background-repeat：一个列表，每个项目由两个关键字组成，每个维度一个
  • background-origin： 作为指定
  • background-clip： 作为指定
  • background-attachment： 作为指定
  • background-color：计算颜色
Animation type as each of the properties of the shorthand:
  • background-color：一种颜色
  • background-image：离散
  • background-clip：离散
  • background-position：长度，百分比或计算的简单列表的可重复列表
  • background-size：长度，百分比或计算的简单列表的可重复列表
  • background-repeat：离散
  • background-attachment：离散
Canonical order order of appearance in the formal grammar of the values

句法

background属性被指定为一个或多个背景层，用逗号分隔。

每个图层的语法如下所示：

  • 每个图层可能包含零个或一个以下任何值：
    • <attachment>
    • <bg-image>
    • <position>
    • <bg-size>
    • <repeat-style>
  • <bg-size>值可能仅在紧跟在<position>“/”字符之后，如下所示：“ center/80%”。
  • <box>值可能包含零次，一次或两次。如果包含一次，它会同时设置background-origin和background-clip。如果它包含两次，第一次出现background-origin，第二次background-clip。
  • <background-color>值可能只包含在指定的最后一个图层中。

值

<attachment>参见background-attachment<box>参见background-clip和background-origin<background-color>参见background-color<bg-image>参见background-image<position>参见background-position<repeat-style>参见background-repeat<bg-size>参见background-size。

形式语法

[ <bg-layer> , ]* <final-bg-layer>where <bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <'background-color'>where <bg-image> = none | <image><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>? ]]<bg-size> = [ <length-percentage> | auto ]{1,2} | cover | contain<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}<attachment> = scroll | fixed | local<box> = border-box | padding-box | content-boxwhere <image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient><length-percentage> = <length> | <percentage>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}where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><color-stop> = <color> <length-percentage>?

示例

HTML

<p class="topbanner">
  Starry sky<br/>
  Twinkle twinkle<br/>
  Starry sky
</p>
<p class="warning">Here is a paragraph<p>

CSS

.warning { 
  background: pink; 
}

.topbanner { 
  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed; 
}

结果

​

规范

规范

状态

评论

CSS背景和边框模块级别3在该规范中定义“背景”。

候选推荐

速记属性已扩展为支持多个背景和新的背景大小，背景源和背景剪辑属性。

CSS级别2（修订1）该规范中“背景”的定义。

建议

没有重大变化

CSS级别1该规范中“背景”的定义。

建议

初始定义

浏览器兼容性

特征

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

基本支持

1.0

12

1.0

4

3.5

1.0

多个背景

1.0

12

3.6

9

10.5

1.3

SVG图像作为背景

31.0

12

9.0

9.0

21.0

5.1

背景尺寸longhand的值

21.0

12

9.0

9.0

21.0

5.1

背景来源的longhand值

21.0

12

22.0

9.0

21.0

5.1

背景剪辑longhand的值

21.0

12

22.0

9.0

21.0

5.1
纠错

特征

Android

Chrome for Android

Edge mbile

Firefox for Android

IE mobile

Opera Android

iOS Safari

基本支持

2.1

?

（是）

1.0

10.0

5.0

3.2

多个背景

2.1

?

（是）

1.0

10.0

?

3.2

SVG图像作为背景

3.0

?

（是）

4.0

10.0

（是）

4.2

背景尺寸longhand的值

3.0

?

（是）

18.0

10.0

（是）

4.0

背景来源的longhand值

3.0

?

（是）

22.0

10.0

没有

4.0

背景剪辑longhand的值

3.0

?

（是）

22.0

10.0

没有

4.0
上一篇：FFmpeg avcodec_send_packet函数说明


下一篇：1、ROS开启SNMP及查看接口OID