CSS 第005 背景-理论

 背景属性：background

CSS 背景属性用于定义HTML元素的背景。

背景缩写属性可以在一个声明中设置所有的背景属性。可以设置的属性分别是：

值	说明
background-color	指定要使用的背景颜色
background-position	指定背景图像的位置
background-size	指定背景图片的大小
background-repeat	指定如何重复背景图像
background-origin	指定背景图像的定位区域
background-clip	指定背景图像的绘画区域
background-attachment	设置背景图像是否固定或者随着页面的其余部分滚动。
background-image	指定要使用的一个或多个背景图像

CSS3 属性定义背景效果

background-color

• background-color属性设置一个元素的背景颜色。
• 元素的背景是元素的总大小，包括填充和边界（但不包括边距）。

颜色值通常以以下方式定义:

• 十六进制 - 如："#ff0000"
• RGB - 如："rgb(255,0,0)"
• 颜色名称 - 如："red"
• background-color 不能继承，其默认值是 transparent。如果一个元素没有指定背景色，那么背景就是透明的，这样其父元素的背景才可见。

语法：

background-color:颜色|inherit|transparent;

属性值

值	描述
color	指定背景颜色。在CSS颜色值近可能的寻找一个颜色值的完整列表。
transparent	指定背景颜色应该是透明的。这是默认
inherit	指定背景颜色，应该从父元素继承

---

background-position

• background-position属性设置背景图像的起始位置。

• 注意对于这个工作在Firefox和Opera，background-attachment必须设置为 "fixed（固定）"。

语法

background-position: horizontal【垂直】 vertical【水平】

水平是

percentage | length | left | center | right 

垂直是

percentage | length | top | center | bottom 

属性值

值	描述
left top left center left bottom right top right center right bottom center top center center center bottom	如果仅指定一个关键字，其他值将会是"center"
x% y%	第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％
xpos ypos	第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions
inherit	指定background-position属性设置应该从父元素继承

---

background-size

指定背景图像的大小

语法

background-size: length|percentage|cover|contain;

属性值

值	描述
length	设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
percentage	将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover	此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

---

background-repeat

• 设置如何平铺对象的 background-image 属性。
• 默认情况下，重复background-image的垂直和水平方向。

语法

background-repeat：repeat|repeat-x|repeat-y|no-repeat|inherit;

属性值

值	说明
repeat	背景图像将向垂直和水平方向重复。这是默认
repeat-x	只有水平位置会重复背景图像
repeat-y	只有垂直位置会重复背景图像
no-repeat	background-image不会重复
inherit	指定background-repea属性设置应该从父元素继承

---

background-origin

• background-origin属性指定background-position属性应该是相对位置。
• 注意如果背景图像background-attachment是"固定"，这个属性没有任何效果。

语法

background-origin: padding-box|border-box|content-box;

属性值

值	描述
padding-box	背景图像填充框的相对位置
border-box	背景图像边界框的相对位置
content-box	背景图像的相对位置的内容框

---

background-clip

background-clip属性指定背景绘制区域。

语法

background-clip: border-box|padding-box|content-box;

属性值

值	说明
border-box	默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box	背景绘制在衬距方框内（剪切成衬距方框）。
content-box	背景绘制在内容方框内（剪切成内容方框）。

---

background-attachment

background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。

语法

background-attachment:scroll | fixed | inherit |local;

属性值

值	说明
scroll	背景图片随页面的其余部分滚动。这是默认
fixed	背景图像是固定的
inherit	指定background-attachment的设置应该从父元素继承
local	背景图片随滚动元素滚动

---

background-image

• background-image属性设置一个元素的背景图像。
• 元素的背景是元素的总大小，包括填充和边界（但不包括边距）。
• 默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。

语法

background-image: url('url') | none | inherit;

属性值

值	说明
url('URL')	图像的URL
none	无图像背景会显示。这是默认
inherit	指定背景图像应该从父元素继承

 

---

一直在路上，自律，坚持