CSS 可以添加背景颜色和背景图片,以及来进行图片设置。
background-color背景颜色
background-image背景图片地址
background-repeat是否平铺
background-position背景位置
background-attachment背景固定还是滚动背景的合写(复合属性)
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
背景图片(image)
none : 无背景图(默认的)
url : 使用绝对或相对地址指定背景图像
div {
width: 300px;
height: 300px;
background-image: url(images/1.png);
}
背景平铺(repeat)
repeat : 背景图像在纵向和横向上平铺(默认的)
no-repeat : 背景图像不平铺
repeat-x : 背景图像在横向上平铺
repeat-y : 背景图像在纵向平铺
设置背景图片时,默认把图片在水平和垂直方向平铺以铺满整个元素。
repeat-x : 背景图像在横向上平铺
repeat-y : 背景图像在纵向平铺
div {
width: 300px;
height: 300px;
background-image: url(images/1.png);
background-repeat: no-repeat;
}
背景位置(position)
position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
如果和精确单位和方位名字混合使用,则必须是x坐标在前,y坐标后面。
比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。
<style>
/* 图片定位用于在一个盒子中定位图片的显示位置,其属性有:
top | center | bottom | left | center | right
或者用像素定位 */
div {
width: 300px;
height: 300px;
background-image: url(image/3.jpg);
background-repeat: no-repeat;
}
.pic1 {
background-position: center center;
}
.pic2 {
background-position: 12px 50px;
}
.pic3 {
background-position: top right;
}
</style>
背景附着
设置或检索背景图像是随对象内容滚动还是固定的。
scroll : 背景图像是随对象内容滚动
fixed : 背景图像固定
body {
/* scroll : 背景图像是随对象内容滚动
fixed : 背景图像固定 */
background-attachment: fixed;
background: red url(image/3.jpg) no-repeat silver left top;
}
背景简写
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
body {
/* scroll : 背景图像是随对象内容滚动
fixed : 背景图像固定 */
background-attachment: fixed;
背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
background: red url(image/3.jpg) no-repeat silver left top;
}
背景透明(CSS3)
最后一个参数是alpha 透明度 取值范围 0~1之间
注意: 背景半透明是指盒子背景半透明, 盒子里面的内容不收影响。
background: rgba(0,0,0,0.3);