css背景样式
1、设置背景色:background-color
设置input标签背景色为蓝色,这个属性接受任何合法的颜色值
input { background-color: blue; }
2、设置背景图像:background-image
设置背景图像,必须为这个属性设置一个 URL 值为图片路径。
body {
background-image: url(log.png);
}
这时背景图片会默认铺满页面:
背景图平铺:background-repeat
如果需要在页面上对背景图像进行平铺,可以使用 background-repeat 属性。
属性值 :
repeat: 导致图像在水平垂直方向上都平铺,默认效果
repeat-x :图像只在水平上重复
body {
background-image: url(log.png);
background-repeat: repeat-x
}
repeat-y :图像在垂直方向上重复
body {
background-image: url(log.png);
background-repeat: repeat-y
}
no-repeat :不允许图像在任何方向上平铺。
body {
background-image: url(log.png);
background-repeat: no-repeat
}
3、背景定位: background-position
可以利用 background-position 属性改变图像在背景中的位置。
定位方式:位置关键字、百分比、长度值
位置关键字:
top: 固定顶点位置,否则图片会上下剧中而显示不全
body {
background-image: url(log.png);
background-repeat: no-repeat;
background-position: center top;
}
left:
body {
background-image: url(log.png);
background-repeat: no-repeat;
background-position: letf top;
}
right:
body {
background-image: url(log.png);
background-repeat: no-repeat;
background-position: right top;
}
bottom:
body {
background-image: url(log.png);
background-repeat: no-repeat;
background-position: right bottom;
}
百分比数值:
body {
background-image: url(log.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}
长度值:
长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。
比如,如果设置值为 50px 100px,图像的左上角将在元素内边距区左上角向右 100 像素、向下 200 像素的位置上:
body {
background-image: url(log.png);
background-repeat: no-repeat;
background-position: 100px 200px;
}
3、背景关联:background-attachment
声明图像相对于可视区是固定的,因此不会受到滚动的影响。
如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。
如下:滑动页面时图像会固定不动
body {
background-image: url(log.png);
background-repeat: no-repeat;
background-position: 100px 200px;
background-attachment: fixed;
}
4、背景图大小:background-size
通过像素指定
body {
background-image: url(log.png);
background-repeat: no-repeat;
background-size: 300px 200px;
}
通过百分比指定
body {
background-image: url(log.png);
background-repeat: no-repeat;
background-size: 10% 10%;
}
原始图片大小
body {
background-image: url(log.png);
background-repeat: no-repeat;
background-size: auto;
}
背景填满容器
body {
background-image: url(log.png);
background-repeat: no-repeat;
background-size: cover;
}