🌟 所属专栏:前端只因变凤凰之路
🐔 作者简介:rchjr——五带信管菜只因一枚
😮 前言:该系列将持续更新前端的相关学习笔记,欢迎和我一样的小白订阅,一起学习共同进步~
👉 文章简介:本文介绍CSS背景相关知识。知识学习内容来自b站的 @黑马程序员 的视频
🔥1 背景颜色
background-color属性定义了元素的背景颜色。一般情况下背景颜色默认是transparent(透明的),我们也可以手动指定背景颜色为透明的。
<!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>Document</title>
<style>
div {
background-color: pink;
}
</style>
</head>
<body>
<div>
我是背景颜色
</div>
</body>
</html>
🔥2 背景图片
background-image属性描述了元素的背景图片。实际开发常见与logo、小的装饰性图片、超大背景图片。优点在于非常便于控制位置。
![](https://i-blog.csdnimg.cn/blog_migrate/e313e71dd4984512410b181a823b077d.png)
<!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>Document</title>
<style>
div {
width: 300px;
height: 300px;
background-image: url("images/王者荣耀.png")
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/b2503cf071c7592637a277f88ad62c8c.png)
上述就是设置背景图片后的效果,但是我们发现图片重复了,这时候就需要让图片平铺。
🔥3 背景平铺
背景平铺就是让图片重复填满元素,而且默认的都是平铺。
background-repeat:有四个属性,可以选择平铺或者不平铺;可以选择在横向或者纵向平铺
<!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>Document</title>
<style>
div {
width: 300px;
height: 300px;
background-image: url("images/王者荣耀.png");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/bfefc8c6910d59b7ee800aab53fc95af.png)
不平铺
<!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>Document</title>
<style>
div {
width: 300px;
height: 300px;
background-image: url("images/王者荣耀.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/46f1a5607c47d4dc16b0a197a7a92956.png)
横向平铺
当然,背景颜色与背景图片可以重复的,只要背景图片没有填充完,背景颜色就会显示
<!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>Document</title>
<style>
div {
width: 300px;
height: 300px;
background-image: url("images/王者荣耀.png");
background-repeat: repeat-x;
background-color: pink;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/48fcca7de496a1fcbc0d69333004e104.png)
🔥 背景图片的位置控制
利用background-position属性客户以改变图片在背景中的位置。
background-position:x,y。其中x,y分别是横纵坐标。可以使用方位名词(top、bottom、center、left、right)也可以使用精确的单位(px)来进行设置。
规则(重要)
属性值为方位名词
x,y都为方位名词,则书写的前后顺序无关。如top center和center top是一样的
<!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>Document</title>
<style>
div {
width: 300px;
height: 300px;
background-image: url("images/王者荣耀.png");
background-repeat: repeat-x;
background-color: pink;
background-position: top center;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/0d12fd0a9bdc178d7f26f73f323db017.png)
如果只有一个方位名词,则另一个默认居中对齐(如只写一个left)
<!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>Document</title>
<style>
div {
width: 300px;
height: 300px;
background-image: url("images/王者荣耀.png");
background-repeat: no-repeat;
background-color: pink;
background-position: left;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/4d71466838e963d7f4077b19ec610d7e.png)
应用案例1-设置小的logo
<!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>Document</title>
<style>
h3 {
height: 40px;
width: 118px;
font-size: 12px;
font-weight: 400;
line-height: 40px;
background-image: url("logo.png");
background-repeat: no-repeat;
background-position: left center;
}
</style>
</head>
<div>
<h3>
成长守护平台
</h3>
</div>
<body>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/edf390429ac57c251bed89938751ca10.png)
应用案例2-设置大的背景图片
<!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>Document</title>
<style>
body {
background-image: url(画中仙.jpg);
background-repeat: no-repeat;
background-position: center top;
}
</style>
</head>
<body>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/37ee35715d6d40876795a252d746177a.png)
可以显示主要部分
方法一般就是center top
2. 属性值为精确单位
如果参数是精确坐标,那么第一个一定是x坐标,第二个一定是y坐标。
如果只写了一个值,那么第一个一定是x坐标,另一个默认垂直居中。
如果一个值在前面,方位名词在后面,那么第一个是x坐标,另一个垂直居中
如果方位名词在前,值在后则方位名词是x,值对应y
<!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>Document</title>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
background-repeat: no-repeat;
background-position: center 20px;
background-image: url(logo.png);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
🔥4 综合案例-五彩导航栏
就是实现在div中放置盒子,然后设置背景图片,并加上链接伪类选择器,实现点击不同的盒子实现不同的图片呈现。
<!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>Document</title>
<style>
.nav a {
display: inline-block;
width: 300px;
height: 330px;
text-decoration: none;
background-color: pink;
color: white;
line-height: 20px;
text-align: center;
}
.nav .bg1:hover {
background: url(message.png) no-repeat;
}
</style>
</head>
<div class="nav">
<a href="#" class="bg1">五彩导航</a>
<a href="#">五彩导航</a>
</div>
<body>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/0265d67d74b6bfea9df1ae17c60b2d20.png)
![](https://i-blog.csdnimg.cn/blog_migrate/5925001d1c8ac74fade441618d68db40.png)
(没找合适的图片,凑合着看吧~)