一,前言
1.在写网页样式的时候,css
背景是十分常用的属性,用于定义元素的背景样式。
2.当只设置了背景图片时,背景图片大小默认是自身原本的尺寸,图片的左上角和元素的左上角点对齐。
3.背景默认占据content
,padding
,border
不包括margin
。
二,css2
背景
1.background-color
:定义了元素的背景颜色,可以使用任何合理的颜色值,值为transparent
时背景颜色为透明。可以和图片背景同时定义。
2.background-image
:定义了元素的背景图片路径。
3.background-repeat
: 定义是否重复背景图片
4.background-size
:定义了元素的背景大小
100px 100px
: 固定像素取值,字面意思就是背景图片的大小
100% 100%
: 以元素本身的大小作为参考
contain
: 等比例缩放展示整张图片
cover
: 等比例方法图片占满这个元素。
5.background-position
:是一个缩写属性,用于定义图片的起始位,即可改变默认的对齐方式(左上角对齐)
background-position-x
: left
,right
, 10px
, 10%
background-position-y
:top
,bottom
,10px
, 10%
需要十分注意的是同background-size
不同,这里的百分比大小参考的是父元素的百分比,而不是元素自身大小的百分比
我们可以同时改变元素的默认对齐方式和偏移的位置
background-position:right 10px top 10px
;
三,css3
背景
1.css3
支持多图背景,使用,
来分隔每个url
,要为每个图片设置其他背景属性时,也可使用用,
分隔。
background:url(../../a.png),url(../../b.png)
background-repeat:no-repeat;//等价于background-repeat:no-repeat,no-repeat;
background-size:10px 10px,20px,20px;
2.background-attachment
:定义背景元素是否随元素滚动
scroll
:默认值,背景元素会随元素的滚动而滚动
fixed
: 不随元素滚动
3.background-clip
: 定义背景图片的展示区域(切割方式),
content-box
: 只展示content
区域的背景,其余部分暴力的切割
padding-box
:展示content
和padding
区域的背景,其余部分暴力的切割
border-box
:展示在content
和padding
和border
区域背景,其余部分暴力的切割
4.background-orgin
:定义背景图片的展示区域(定位方式),
content-box
: 只展示content
区域的背景,改变了图片的默认对齐方式,
padding-box
:展示content
和padding
区域的背景
border-box
:展示在content
和padding
和border
区域背景