background 背景样式

1.background-image 背景图片

        background-image: url('./images/2.jpg'); 

2.background-color 背景颜色

        background-color: cyan;

3.background-origin 设定背景图片的起始覆盖点
border-box 从边框区开始绘制背景图片
padding-box 从内间距区开始绘制背景图片,默认
content-box 从内容区开始绘制背景图片

4.background-clip 设定背景的覆盖范围
border-box 在边框区显示
padding-box 在内间距区显示
content-box 在内容区显示

5.background-attachment 设置背景图片的固定点
scroll 默认,背景图片随着滚动条滚动
fixed 背景图片固定,即使内容滚动,背景图片不滚动

6.background-repeat 设置背景图片的重复
repeat x方向和y方向都重复
repeat-x 在x方向重复一行
repeat-y 在y方向重复一行
no-repeat x方向和y方向都不重复

7.background-size 设置背景图片大小
cover 扩展背景图片,覆盖背景区域,保持背景图片的比例进行扩展。可能容器内的背景图片展示不完全
contain 扩展背景图片,覆盖背景区域,保持背景图片的比例进行扩展。可能容器内有一部分没有背景图片,按照容器的最小边扩展
百分比
background-size: 100% 100%;

发布了39 篇原创文章 · 获赞 0 · 访问量 167

猜你喜欢

转载自blog.csdn.net/yaningyin/article/details/105036326
今日推荐