【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;

【CSS】css的background属性用法详解,background常用缩写形式_第1张图片

你可能感兴趣的:(css,css,css3,前端)