前端学习笔记67-背景
background-color
设置背景颜色
background-image
设置背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景</title>
<style>
.box1{
width: 500px;
height:500px;
background-image:url("./img/1.png") ;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
如果背景颜色和背景图片同时设置,效果如下
<style>
.box1{
width: 500px;
height:500px;
background-color: #bfa;
background-image:url("./img/1.png") ;
}
</style>
如果背景图片小于元素,则背景图片会自动在元素中平铺将元素铺满。(实际上我的图片是一只猫,但由于元素很大,所以变成了16只。)
如果背景图片大于元素,则背景图片无法完全显示。
如果我虽然图片小,但是我就是只想要一只小猫,要怎么做呢?
background-repeat
设置背景的重复方法
可选值:
repeat:默认值,背景沿着x轴和y轴方向重复(也就是前面的效果,16只猫)
repeat-x:沿着x轴方向重复
repeat-y:沿着y轴方向重复
no-repeat:不重复
<style>
.box1{
width: 500px;
height:500px;
background-color: #bfa;
background-image:url("./img/1.png") ;
background-repeat: no-repeat;
}
</style>
如果想改变小猫的位置,怎么做呢?
background-position
设置背景图片的位置
可以通过top、bottom、left、right、center来设置位置。
这里水平和垂直都得写,如果只写一个,则没写的那个就是center。
<style>
.box1{
width: 500px;
height:500px;
background-color: #bfa;
background-image:url("./img/1.png") ;
background-repeat: no-repeat;
background-position: right top;
}
</style>
此外,还可以通过设置偏移量来指定背景图片的位置
<style>
.box1{
width: 500px;
height:500px;
background-color: #bfa;
background-image:url("./img/1.png") ;
background-repeat: no-repeat;
background-position: 100px 100px;
}
</style>
从前面的学习我们知道,边框的下面实际上也是有背景的,如果我们不想边框下面有背景,要怎么做呢?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景</title>
<style>
.box1{
width: 500px;
height:500px;
background-color: #bfa;
background-image:url("./img/1.png") ;
background-repeat: no-repeat;
padding: 10px;
border:red 10px double;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
background-clip
设置背景的范围
可选值:
border-box:默认值,背景范围包括边框下面
padding-box:背景范围不包括边框,只包括内容区和内边距
content-box:背景范围只包括内容区
<style>
.box1{
width: 500px;
height:500px;
background-color: #bfa;
background-image:url("./img/1.png") ;
background-repeat: no-repeat;
padding: 10px;
border:red 10px double;
background-clip: content-box;
}
</style>
从结果可以看到,背景图片没动,只是把超出范围的给裁掉了,这是为啥,因为背景图片的放置是有参考点的。如何改呢?
background-origin
设置背景图片的偏移量参考的原点
默认的原点是padding,即内边距。
可选值:
padding-box:默认值
content-box:参考原点为内容区
border-box:参考原点为边框
<style>
.box1{
width: 500px;
height:500px;
background-color: #bfa;
background-image:url("./img/1.png") ;
background-repeat: no-repeat;
padding: 10px;
border:red 10px double;
background-clip: content-box;
background-origin: content-box;
}
</style>
如果我显示一张大图片,那么显示区只显示一部分,要如何做才能显示全部呢?
background-size
设置背景图片尺寸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景</title>
<style>
.box1{
width: 80px;
height:80px;
background-color: #bfa;
background-image:url("./img/1.png") ;
background-repeat: no-repeat;
background-size: 80px 80px;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
这里需要写两个值,但如果你写一个,则第二个默认为auto。
也可以写成百分比,表示占据元素的大小。
此外还可以写cover,表示图片比例不变,将元素铺满。啥意思呢?首先,这张猫图是128*128,也就是宽和高相等。看下面代码,我把元素的宽高改成不相等,然后设置cover。
<style>
.box1{
width: 180px;
height:100px;
background-color: #bfa;
background-image:url("./img/1.png") ;
background-repeat: no-repeat;
background-size: cover;
}
</style>
还可以设置为contain,表示图片在元素中完整显示。
<style>
.box1{
width: 180px;
height:100px;
background-color: #bfa;
background-image:url("./img/1.png") ;
background-repeat: no-repeat;
background-size: contain;
}
</style>
看下一个问题,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景</title>
<style>
.box1{
width: 500px;
height:500px;
overflow: auto;
background-color: #bfa;
background-image:url("./img/2.jpg") ;
background-repeat: no-repeat;
background-size: contain;
}
.box2{
width: 300px;
height: 800px;
background-color: red;
background-image: url("./img/1.png");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
这个代码时在box1里写了个子元素,同时box1的背景为钢铁侠,box2为小猫。由于box2的高度超过了父元素,所以父元素设置了滚动条。
结果如下,
如果我滑动滚动条,小猫也跟着移动。
如果我不想它跟着移动要怎么设置呢?
background-attachment
设置背景图片是否跟随元素移动
可选值:
scroll:默认值,背景图片跟着元素移动
fixed:固定住背景图片
.box2{
width: 300px;
height: 800px;
background-color: red;
background-image: url("./img/1.png");
background-repeat: no-repeat;
background-attachment:fixed;
}
background
这个是简写属性,所以前面这些都可以用它写。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景</title>
<style>
.box3{
width: 500px;
height:500px;
background: #bfa url("./img/1.png") center center no-repeat;
}
</style>
</head>
<body>
<div class="box3">
</div>
</body>
</html>
没有顺序的限制,但是这么说不严谨。
1如果我想设置size,则它得用/写在position的第二个值的后边。
<style>
.box3{
width: 500px;
height:500px;
background: #bfa url("./img/1.png") center center/contain no-repeat;
}
</style>
另一个地方是设置背景的范围和背景的参考原点用的值是同一批,所以这两个是有顺序的,即origin在clip前面。
<style>
.box3{
border: 10px red double;
padding: 30px;
width: 500px;
height:500px;
background: #bfa url("./img/1.png") center center/contain border-box content-box no-repeat;
}
</style>
看这里,我第一个是border-box,第一个是content-box,所以参考点为边框,背景图片范围为内容区。
这节学的内容有点杂多,感觉做笔记很有必要,毕竟看一次记不下,以后用到了查一查笔记就行了。