背景

背景属性:

background-color:背景颜色

background-image:背景图像

background-repeat: 背景重复,默认在水平垂直方向重复

background-attachment:背景附着

background-position:指定背景图像的位置。

背景颜色:

设置背景颜色

背景可以使用background-color属性指定背景颜色。

可以使用如下方式指定:

有效的颜色名称,例如:“red”、”blue”等等。

十六进制颜色值,例如:#000000、#FFFFFF。

RGB值,例如:rgb(123,123,123)、rgb(255,255,255)。

透明度/不透明度

可以通过opacity属性指定元素的透明度,取值范围为0-1.0,值越低,透明度越高。

例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<style>
*{
margin: 0;
padding: 0;
}
div{
position: relative;
background-color: aqua;
margin: 0 auto;
padding: 50px;
width: 300px;
text-align: center;
}
.one{
opacity: 0.9;
}
.two{
opacity: 0.6;
}
.three{
opacity: 0.3;
}
</style>
<body>
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
</body>

效果:

image-20210308204907186

但这个地方需要注意的是,opacity属性为元素添加背景透明度时,所有子元素都会继承该透明度,但是有些时候我们并不需要这种特性。

这种情况下我们可以使用RGBA颜色值,就是在RGB颜色的基础上加了Alpha通道

RGBA颜色值为:rgba(red, green, blue, alpha),Alpha参数同样介于0-1.0之间,数值越小透明度越高。

背景图像:

可以使用background-image属性为元素设置背景图像。

例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
.bg{
position: relative;
margin: 0 auto;
width: 600px;
height: 400px;
text-align: center;
font-size: 50px;
background-image: url(https://cdn.jsdelivr.net/gh/yang010221/cdn/topimg8.png);
}
</style>
<body>
<div class="bg">Three</div>
</body>

效果:

image-20210308222658907

背景重复:

可以使用background-repeat属性设置背景图像的重复方式或者是否重复。

background-repeat属性默认的值是水平与垂直方向上重复图像。

例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
html,body{
width: 100%;
height: 100%;
}
.bg{
height: 100%;
background-image: url(Demo-4-img1.jpg);
}
</style>
<body>
<div class="bg">Three</div>
</body>

效果:

image-20210308223319866

background-repeat属性的可选值有:

repeat-x:只在水平方向重复。

repeat-y:只在垂直方向重复。

no-repeat:不重复图像,只显示一次。

图像位置:

可以通过background-position属性设置图像的显示位置。

可设置为:x轴位置,y轴位置、top、right、bottom、left、以及这些方向的组合。

例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
html,body{
width: 100%;
height: 100%;
}
.bg{
height: 100%;
background-repeat: no-repeat;
background-position: 100px 100px;
background-image: url(Demo-4-img1.jpg);
}
</style>
<body>
<div class="bg">Three</div>
</body>

效果:

image-20210308224229965

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
html,body{
width: 100%;
height: 100%;
}
.bg{
height: 100%;
background-repeat: no-repeat;
background-position: top right;
background-image: url(Demo-4-img1.jpg);
}
</style>
<body>
<div class="bg">Three</div>
</body>

效果:

image-20210308224348906

背景附着:

可以通过background-attachment属性设置背景图像是应该滚动还是固定。

可选项有:

fixed:背景图像固定,背景图像会固定于页面的设定位置,不会随滚动而移开。

scroll:背景是滚动的,随页面其他部分一起滚动。

背景尺寸:

可以通过background-size属性为背景图像设置尺寸。

例如:

1
background-size: 200px 150px;

效果:

image-20210308225415233

背景绘制区域:

可以通过background-clip属性设置背景图像的绘制区域。

背景图像的默认绘制区域是绘制到边框,我们可以通过该属性更改绘制区域。

可选项:

border-box 背景被裁剪到边框盒。(默认值)
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。

1
background-clip: padding-box;

Js语法:

1
object.style.backgroundClip="padding-box";

背景属性简写:

以上部分背景相关的属性,可以采用简写方式,以缩短代码。

例如:

1
2
3
4
5
6
body {
background-color: #ffffff;
background-image: url("tree.png");
background-repeat: no-repeat;
background-position: right top;
}

可以简写为:

1
2
3
body {
background: #ffffff url("tree.png") no-repeat right top;
}

在使用简写方式时,书写顺序是有要求的。

但是如果有不需要设置的属性,直接跳过继续按顺序写下一项即可。

顺序要求:

background-color
background-image
background-repeat
background-attachment
background-position