【CSS】css的background属性用法详解，background常用缩写形式

background是一个简写属性，可以在一个声明中设置背景颜色、背景位置、背景大小、背景平铺方式、背景图片等样式
语法background: 颜色 图片 位置/大小 平铺方式 bg-origin 绘制区域 bg-attachment;。

background 简写属性在一个声明中设置所有的背景属性：

1. background-color: #fff; //指定背景颜色

2. background-image: url(~@/assets/images/upload.png); //设置背景图像, 可以是真实的图片路径, 也可以是创建的渐变背景;

3. background-position: center;//设置背景图像的位置

4. background-size: cover;//设置背景图像的大小

5. background-repeat: no-repeat; //指定背景图像的铺排方式

6. background-origin: content-box;//设置背景图像显示的原点[background-position相对定位的原点];

7. background-clip: content-box;//设置背景图像向外剪裁的区域;

8. background-attachment: fixed;//指定背景图像是滚动还是固定; 默认滚动；

语法：

1. 如果不设置其中的某个值，也不会出问题，比如background: #fff;也是允许的。
2. 顺序并非固定
3. background-position 和 background-size 属性, 之间需使用/分隔, 且position值在前, size值在后。
4. 如果同时使用 background-origin 和 background-clip 属性, origin属性值需在clip属性值之前, 如果origin与clip属性值相同, 则可只设置一个值。

background:bg-color bg-image bg-position/bg-size bg-repeat bg-origin bg-clip bg-attachment;

background: url(~@/assets/images/custom-task/uploadimg.png) center/50% no-repeat;
1
2
3