** background背景属性**
background-color( 背景颜色): 指定区域填充的背景颜色 表示方式:
1. 十六进制: 如:#ff0000;
2. 英文单词: 如:red;
3. rgb: 如:rgb(255, 0, 0);
background-image(背景图片):指定区域的背景图片 表示方式:
1. 相对路径(从当前HTML文件开始的路径):如: img/1.png
2. 绝对路径(指带域名的文件的完整路径):如:https://img30.360buyimg.com/pop/s1180x940_jfs/t1/118468/30/17358/101230/5f58938fEebbb3915/cb9a053ed5b9d0ce.jpg
background-repeat(背景图片的平铺方式) 属性值:
repeat-x 从x轴开始平铺
repeat-y 从y轴开始平铺
no-repeat 不平铺
background-position背景图片的位置
background-position: 水平位置 垂直位置
如:background-position: 10% 10%;
background-position: top center;
background-attachment 背景图片是否固定或者随页面滚动 属性值:
background-attachment : fixed 固定
background-attachment : scroll 随页面滚动
background-attachment : inherit 从父元素继承
background-clip 背景的绘制区域 属性值
border-box 背景被裁剪到边框盒
padding-box 背景被裁剪到内边距框
content-box 背景被裁剪到内容框
background-origin 背景的定位区域 属性值
padding-box 背景图像相对于内边距框来定位
border-box 背景图像相对于边框盒来定位
content-box 背景图像相对于内容框来定位
background-size 背景图片的大小 属性值
*1. 具体的值。 x轴 y轴
background-size: 20px 20px;
background-size: 20% %20;
2. cover 以背景图片长的一边覆盖背景区域
3. contain 以背景图片短的一边覆盖背景区域
背景属性简写
background:
[background-color]
[background-image]
[background-repeat]
[background-attachment]
[background-position] / [ background-size]
[background-origin]
[background-clip];