背景相关属性
背景颜色
如何设置标签的背景颜色?
- 在 CSS 中可以通过
background-color 属性设置标签的背景颜色
取值：
- 具体单词
- rgb
- rgba
- 十六进制
格式：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景颜色</title>
<style>
div {
width: 100px;
height: 50px;
}
.box1 {
background-color: red;
}
.box2 {
background-color: rgb(0, 255, 0);
}
.box3 {
background-color: rgba(0, 0, 255, 0.7);
}
.box4 {
background-color: #0ff;
}
</style>
</head>
<body>
<div></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
快捷键：
- bc background-color: #fff;
背景图片
如何设置背景图片?
- 在 CSS 可以通过
background-image: url(); 设置背景图片
格式：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景图片</title>
<style>
div {
width: 500px;
height: 500px;
}
.box1 {
background-image: url(images/BN.jpg);
/*background-image: url(https:///image_search/src=http%3A%2F%%2F30%2F29%2F01300000201438121627296084016.jpg&refer=http%3A%2F%&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617772823&t=6315adaf7b3c55e713865fb6db3bb3b3);*/
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
注意点：
- 图片的地址必须放在
url() 中, 图片的地址可以是本地的地址, 也可以是网络的地址 - 如果图片的大小没有标签的大小大, 那么会自动在水平和垂直方向平铺来填充
- 如果网页上出现了图片, 那么浏览器会再次发送请求获取图片
快捷键：
- bi background-image: url();
背景平铺
如何控制背景图片的平铺方式?
- 在 CSS 中可以通过
background-repeat 属性控制背景图片的平铺的方式
取值：
- repeat 默认, 在水平和垂直都需要平铺
- no-repeat：在水平和垂直都不需要平铺
- repeat-x：只在水平方向平铺
- repeat-y：只在垂直方向平铺
格式：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景图片</title>
<style>
div {
width: 1000px;
height: 500px;
}
.box1 {
background-color: red;
background-image: url(https:///image_search/src=http%3A%2F%%2F30%2F29%2F01300000201438121627296084016.jpg&refer=http%3A%2F%&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617772823&t=6315adaf7b3c55e713865fb6db3bb3b3);
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
应用场景：
- 可以通过背景图片的平铺来降低图片的大小, 提升网页的访问速度
- 可以将多张图片拼接成一张图片
注意点：
- 背景颜色和背景图片可以共存, 图片会覆盖颜色
快捷键：
- bgr background-repeat:
背景定位
如何控制背景图片的位置?
- 在 CSS 中有一个叫做
background-position 的属性, 就是专门用于控制背景图片的位置
格式：
- background-position: 水平方向 垂直方向;
取值：
- 具体的方位名词
- 水平方向：left center right
- 垂直方向：top center bottom
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景定位</title>
<style>
div {
width: 1000px;
height: 500px;
}
.box1 {
background-color: red;
background-image: url(https:///image_search/src=http%3A%2F%%2F30%2F29%2F01300000201438121627296084016.jpg&refer=http%3A%2F%&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617772823&t=6315adaf7b3c55e713865fb6db3bb3b3);
background-repeat: no-repeat;
/*
background-position: left top;
background-position: right top;
background-position: right bottom;
background-position: left bottom;
background-position: center center;
background-position: left center;
*/
background-position: center top;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
还可以是具体的像素
- 例如：background-position：100px 200px;
- 记住一定要写单位, 也就是一定要写
px - 记住具体的像素是可以接收负数的
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景定位</title>
<style>
div {
width: 1000px;
height: 500px;
}
.box1 {
background-color: red;
background-image: url(https:///image_search/src=http%3A%2F%%2F30%2F29%2F01300000201438121627296084016.jpg&refer=http%3A%2F%&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617772823&t=6315adaf7b3c55e713865fb6db3bb3b3);
background-repeat: no-repeat;
/*
background-position: 100px 0;
background-position: 100px 200px;
*/
background-position: -100px -100px;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
应用场景：
- 当图片比较大的时候, 可以通过定位属性保证图片永远居中显示
快捷键：
- bp background-position：0 0;
背景属性连写
和 font 属性一样, background 属性也可以连写
背景属性缩写的格式
- background：背景颜色 背景图片 平铺方式 关联方式 定位方式;
注意点：
- background 属性中，任何一个属性都可以被省略
快捷键：
- bg + background: #fff url() 0 0 no-repeat;
背景关联
什么是背景关联方式？
默认情况下背景图片会随着滚动条的滚动而滚动， 如果不想让背景图片随着滚动条的滚动而滚动，那么我们就可以修改背景图片和滚动条的关联方式
如何修改背景的关联方式？
- 在 CSS 中有一个叫做
background-attachment 的属性，这个属性就是专门用于修改关联方式的
格式：
- background-attachment：scroll;
取值：
- scroll：默认值，会随着滚动条的滚动而滚动
- fixed：不会随着滚动条的滚动而滚动
快捷键：
- ba background-attachment:;
插入图片和背景图片的区别
- 背景图片仅仅是一个装饰, 不会占用位置
- 插入图片会占用位置
- 背景图片有定位属性, 所以可以很方便的控制图片的位置
- 插入图片没有定位属性, 所以控制图片的位置不太方便
- 插入图片的语义比背景图片的语义要强, 所以在企业开发中如果你的图片想被搜索引擎收录, 那么推荐使用插入图片
css 精灵图
什么是 CSS 精灵图？
- CSS 精灵图是一种图像合成技术, 全称 CSS Sprite
CSS 精灵图的作用：
- 可以减少请求的次数, 以及可以降低服务器的处理压力
如何使用 CSS 精灵图呢？
- CSS 的精灵图需要配合背景图片和背景定位来使用
示例如下所示：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 精灵图</title>
<style>
.box {
width: 86px;
height: 28px;
background-image: url(images/weibo.png);
background-position: -425px -200px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
完整的图片是这样子的如下
