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;	/* 行内块元素 */