CSS背景属性(color+image+repeat+attachment)

背景属性

• background-color
• background-image
• background-repeat
• background-attachment

1.background-color

三种色值：

1. 颜色名称关键词 red
2. 十六进制值 #fff
3. rgb

2.background-image

background-image:url("地址");

• 该url指定图像文件的路径。 支持相对路径和绝对路径。
• 默认情况下，背景图像放置在元素的左上角，并且垂直和水平重复以覆盖整个元素。
• background-image不仅可以设置整个页面，而且可以设置个别元素。
• 要指定多个图片，只需用逗号分隔设置多个url( )属性就可以了。

3.background-repeat 重复背景图像

背景图像可以沿水平轴，垂直轴，两个轴重复，或者根本不重复。

1. repeat-x 沿x轴重复图像
2. repeat-y 沿y轴重复设置图像
3. no-repeat 不重复设置图像
4. == 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 规定继承父元素的属性