背景属性
- background-color
- background-image
- background-repeat
- background-attachment
1.background-color
三种色值:
- 颜色名称关键词 red
- 十六进制值 #fff
- rgb
2.background-image
background-image:url("地址");
- 该url指定图像文件的路径。 支持相对路径和绝对路径。
- 默认情况下,背景图像放置在元素的左上角,并且垂直和水平重复以覆盖整个元素。
- background-image不仅可以设置整个页面,而且可以设置个别元素。
- 要指定多个图片,只需用逗号分隔设置多个url( )属性就可以了。
3.background-repeat 重复背景图像
背景图像可以沿水平轴,垂直轴,两个轴重复,或者根本不重复。
- repeat-x 沿x轴重复图像
- repeat-y 沿y轴重复设置图像
- no-repeat 不重复设置图像
- == inherit 继承,继承父级元素属性==
差点把我搞糊涂:
例如,我们只在body上设置background-repeat:repeat-x;。 如果我们设置了一些段落的background-repeat为inherit,它们将采用与body元素相同的属性值。
CSS代码:
body {
background-image: url("https://statics.w3cschool.cn/images/w3c/header-logo.png");
background-repeat: repeat-x;
}
p {
background-image: url("https://statics.w3cschool.cn/images/w3c/header-logo.png");
background-repeat: inherit;
margin-top: 100px;
padding: 40px;
}
指点迷津:弄清楚元素选择器
4.background-attachment背景图像的滚动
- scroll 默认值 :背景图像随着页面其余部分的滚动而滚动
- fixed 当前页面其余部分滚动时,背景图像不会随之滚动 设置了fixed属性后,即使元素具有滚动机制,背景图像会固定在某个位置不会跟随页面元素滚动。
- inherit 规定继承父元素的属性