💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
**background** * 描述:复合属性。设置对象的背景特性 * 版本:CSS1 | CSS3 该属性在 CSS3 有修改 * 继承性:无 **语法** 复合属性的每个属性的值在独立属性中查看。 ``` background:background-image | background-position[/background-size] | background-repeat | background-attachment | background-origin | background-clip | background-color ; ``` * background-image:设置对象的背景图。可以是真实图片路径或使用渐变创建的“背景图”。 * background-position:设置对象背景图的位置。 * background-size:设置对象背景图的尺寸大小。 * background-repeat:设置对象背景图如何铺排填充。 * background-attachment:设置对象背景图是随对象内容滚动还是固定。 * background-origin:设置对象背景图像显示的原点。 * background-clip:设置对象背景图向外裁剪的区域。 * background-color :设置对象的背景颜色。 **使用说明** 1. 一个元素可以设置多重背景图像,每组属性间使用逗号分隔。如果设置的多重背景图之间存在重叠,前面的背景图会覆盖在后面的背景图之上。 2. bg-color 只能设置一次,且由于写在前面的背景会叠在之后的背景之上,推荐背景色定义在最后一组上,避免背景色将图像盖住。 ``` background: url(../img/01.jpg) 10px 10px/50px 50px no-repeat scroll content-box padding-box, url(../img/02.jpg) 20px 20px/100px 100px no-repeat scroll content-box padding-box, url(../img/03.jpg) 30px 30px/200px 200px no-repeat scroll content-box padding-box #ff6600; ``` ![background效果](https://box.kancloud.cn/80e9a9610fb9de08962add2fd2ac820a_286x254.png) 拆分方式: ``` background-image:url("../img/01.jpg"),url("../img/02.jpg"),url("../img/03.jpg"); background-repeat:no-repeat; background-attachment:scroll; background-position:10px 10px, 20px 20px, 30px 30px; background-size:50px 50px,100px 100px,200px 200px; background-origin:content-box; background-clip:padding-box; background-color:#ff6600; ``` 如果 background-origin 和 background-clip 设置了相同的值。 可以这样设置 ``` background: url(../img/01.jpg) 10px 10px/50px 50px no-repeat scroll padding-box #ff6600; ``` 表示 background-origin 和 background-clip 都使用了padding-box 参数值。