背景处理 background

目录

背景图片

背景重复

背景滚动

背景位置

背景尺寸

---

背景图片

可以使用 png| gif |jpeg 等图片做为背景使用

background-image: url(icon-s.jpg);

背景重复

background-repeat: repeat-y

选项	说明
repeat	水平、垂直重复
repeat-x	水平重复
repeat-y	垂直重复
no-repeat	不重复
space	背景图片对称均匀分布

背景滚动

background-attachment: fixed;

选项	说明
scroll	背景滚动
fixed	背景固定

背景位置

居中对齐
background-position: center;
或
background-position: 50% 50%;

水平居右，垂直居中
background-position: right center;
或
background-position: 100% 50%;

使用具体数值定义
background-position: 100px 100px;
也支持使用负值
background-position: -200px 100px;

选项	说明
left	左对齐
right	右对齐
center	居中对齐
top	顶端对齐
bottom	底部对齐

背景尺寸

选项	说明
cover	背景完全覆盖，可能会有背景溢出，适合大的背景图片
contain	图片不溢出的放在容器中，可能会漏出部分区域

指定数值定义宽高尺寸
background-size: 50% 100%;
或
background-size: 200px 200px;

宽度固定高度自动
background-size: 50% auto;