认识CSS的background（二）
位置:
首页 >
前端三套件[发布: 2024.3.9 作者: 马黑 阅读: 114]
上一讲的示例，我们通过 background 属性给div元素上背景图，代码如下：
background: url('https://638183.freep.cn/638183/t24/jpg/dysonstar.jpg');
background 其实是一个简写属性，它可以一次性定义背景颜色、背景图像、背景固定、背景重复、背景位置、背景大小等等即 background-* 系列属性。上述 background 属性代码，我们设置的 url() 值，它是 background-image，其余的 background-* 采用默认值（缺省时使用默认值）。background 简写属性能简化代码，但要用好简写属性不容易，本节就先来讨论它。
一般地，CSS简写属性不强制各属性的出现顺序，但由于一些属性的属性值写法一样，所以编写简写属性时各属性值出现的次序还是应当依据大佬们既定约成的习惯写法以及CSS具体的写法规范进行，background 简写属性次序如下：
background: 颜色 背景图像 固定与否 重复与否 背景位置 / 背景大小;
//举例
background: tan url('./grass.png') fixed no-repeat 50% 50% / 100% 100%;
/* 说明
background-attachment - 设置背景图像是否固定或者随着页面的其余部分滚动
scroll 默认值。背景图像会随着页面其余部分的滚动而移动
fixed 当页面的其余部分滚动时，背景图像不会移动
不是所有的 background-* 属性值都能写入简写属性；使用默认值的属性可以不写
由于背景位置与背景大小两个属性值写法一样，所以用 / 分开它们，但注意，使用 / 时
必须位置大小同时出现，位置在先，大小在后；大小可以省略，省略时 / 不要
*/
下面介绍 background-* 的具体含义：
background-attachment: 设置背景图像是固定的还是与页面的其余部分一起滚动
background-clip: 规定背景的绘制区域
background-color: 设置元素的背景色
background-image: 设置元素的背景图像
background-origin: 规定在何处放置背景图像
background-position: 设置背景图像的开始位置
background-repeat: 设置背景图像是否及如何重复
background-size: 规定背景图像的尺寸
以上这些 background-* 属性，都将在后续的讲义里逐一介绍，但不一定按上面的顺序。
前一篇: 认识CSS的background（一）
下一篇: 认识CSS的background（三）
发表评论:
评论列表 [1条]
#1 | 知名不具 于 2024-3-11 21:54 发布: 继续学习
