background
是一个简写属性,可以在一个声明中设置背景颜色、背景位置、背景大小、背景平铺方式、背景图片等样式
语法background: 颜色 图片 位置/大小 平铺方式 bg-origin 绘制区域 bg-attachment;
。
background 简写属性在一个声明中设置所有的背景属性:
-
background-color: #fff;
//指定背景颜色
-
background-image: url(~@/assets/images/upload.png);
//设置背景图像, 可以是真实的图片路径, 也可以是创建的渐变背景;
-
background-position: center;
//设置背景图像的位置
-
background-size: cover;
//设置背景图像的大小
-
background-repeat: no-repeat;
//指定背景图像的铺排方式
-
background-origin: content-box;
//设置背景图像显示的原点[background-position相对定位的原点];
-
background-clip: content-box;
//设置背景图像向外剪裁的区域;
-
background-attachment: fixed;
//指定背景图像是滚动还是固定; 默认滚动;
语法:
- 如果不设置其中的某个值,也不会出问题,比如
background: #fff;
也是允许的。
- 顺序并非固定
- background-position 和 background-size 属性, 之间需使用/分隔, 且position值在前, size值在后。
- 如果同时使用 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;