CSS背景
一、背景
1.背景色
background-color:red;
VSCode中快捷输入 （bgc）
2.背景图
background-image:url(./img/1.png);
VSCode中快捷输入 （bgi）
3.背景图平铺方式
background-repeat:no-repeat; /* 不平铺 */
background-repeat:repeat; /* 平铺（默认效果） */
background-repeat:repeat-x; /* 水平方向平铺 */
background-repeat:repeat-y; /* 垂直方向平铺 */
VSCode中快捷输入 （bgr）
4.背景图位置
background-position:left top;
VSCode中快捷输入 （bgp）
5.背景图缩放
background-size:cover; /* 等比例缩放，背景图部分可能不可见 */
background-size:contain; /* 等比例缩放，背景图全部可见 */
background-size:50%; /* 等比例缩放 */
VSCode中快捷输入 （bgs）
6.背景图固定
background-attachment:fixed; /* 背景图不跟随内容滚动 */
VSCode中快捷输入 （bga）
7.背景复合属性
background:red url(./img/1.png) no-repeat left top/cover;
/* 颜色 背景图路径 平铺方式 背景图位置/缩放 */
二、显示模式
1.块级元素
- 独占一行
- 宽度默认是父级100%
- 设置宽度属性不失效
2.行内元素
- 一行可以显示多个
- 设置宽高属性失效
- 宽高由内容撑开
3.行内块元素
- 一行可以显示多个
- 设置宽高属性不失效
- 宽高也可以由内容撑开
三、转换显示模式
display:block; /* 块级元素 */
display:inline; /* 行内元素 */
display:inline-block; /* 行内块元素 */