CSS-背景 | background

简介:

CSS background速记属性允许您一次调整所有可用的背景样式选项,包括彩色图像,原点和大小,重复方法以及其他功能。background可用于对一个或多个设置值:background-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-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-imagenone
  • background-position0% 0%
  • background-sizeauto auto
  • background-repeatrepeat
  • background-originpadding-box
  • background-clipborder-box
  • background-attachmentscroll
  • background-colortransparent
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-originbackground-clip。如果它包含两次,第一次出现background-origin,第二次background-clip
  • <background-color>值可能只包含在指定的最后一个图层中。

<attachment>参见background-attachment<box>参见background-clipbackground-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

相关文章
|
6月前
|
前端开发 UED 容器
CSS基础-背景属性:颜色、图片、重复
【6月更文挑战第9天】本文介绍了CSS背景属性,包括背景颜色、图片、重复的使用和常见问题。通过实例展示了如何设置背景颜色(如使用rgba()注意透明度影响)、背景图片(使用background-size控制缩放)、背景重复(避免默认平铺导致混乱)以及综合使用背景属性创建复杂效果。理解并熟练运用这些属性能提升网页设计的视觉层次和用户体验。建议通过实践不断探索和提升CSS技能。
81 4
|
6月前
|
前端开发 容器
CSS3 新增背景属性 + 新增边框属性(如果想知道CSS3新增背景属性和新增边框属性的知识点,那么只看这一篇就够了!)
CSS3 新增背景属性 + 新增边框属性(如果想知道CSS3新增背景属性和新增边框属性的知识点,那么只看这一篇就够了!)
|
6月前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
53 1
|
6月前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
83 1
|
5月前
|
前端开发 JavaScript
【HTML+CSS+JavaScript】3d-boxes-background
【HTML+CSS+JavaScript】3d-boxes-background
35 0
|
7月前
|
前端开发
一文搞懂css常用字体属性与背景属性(2),非科班面试之旅
一文搞懂css常用字体属性与背景属性(2),非科班面试之旅
|
7月前
|
前端开发
CSS背景
【5月更文挑战第3天】CSS背景。
57 8
|
7月前
|
前端开发
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
|
7月前
|
前端开发
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果(下)
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果
187 1
|
7月前
|
前端开发 容器
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果(上)
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果
166 1