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

在这里插入图片描述

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

卸载引擎

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值