重学---css背景与精灵图

background-color:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{
    
    padding: 0px;margin: 0px;}
		div
		{
    
    
			width: 100px;
			height: 100px;
		}
		.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 class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>

注意一下,rgba代表了红色绿色蓝色透明哈(0-1),0代表完全透明,1代表原本模样.

效果：

在这里插入图片描述

background-image

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{
    
    padding: 0px;margin: 0px;}
		div
		{
    
    
			width: 500px;
			height: 500px;
		}
		.box1
		{
    
    
			background-image:  url(images/girl.jpg);
		}
	</style>
</head>
<body>
	<div class="box1"></div>
</body>
</html>

注意一下：
url里面的是相对路径哈.

在这里插入图片描述

background-repeat:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		div
		{
    
    
			width: 500px;
			height: 500px;
		}
		.box1
		{
    
    
			background-image: url(images/girl.jpg);
			background-repeat: repeat-y;
		}
	</style>
</head>
<body>
	<div class="box1"></div>
</body>
</html>

注意一下,:
取值:
repeat 默认, 在水平和垂直都需要平铺
no-repeat 在水平和垂直都不需要平铺
repeat-x 只在水平方向平铺
repeat-y 只在垂直方向平铺

效果：

## 效果;

background-position:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{
    
    padding: 0px;margin: 0px;}
		.box1
		{
    
    
			height: 500px;
			height: 100vh;
			background-image: url(images/yxlm.jpg);
			background-position: center center;
			background-repeat: no-repeat;
		}
	</style>
</head>
<body>
	<div class="box1"></div>
</body>
</html>

注意一下,background-position这个属性分为水平垂直.

记住，最核心的一点就是背景是在css定义的不是在html定义的啊

效果：

![效果：](https://img-blog.csdnimg.cn/20201030092928735.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODA1ODMy,size_16,color_FFFFFF,t_70#pic_cente在这里插入图片描述

background-attachment

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{
    
    padding: 0px;margin: 0px;}
		body
		{
    
    
			  background-image: url(images/girl.jpg);
			  background-repeat: no-repeat;
			  background-attachment:fixed;
		}
	</style>
</head>
<body>
	<div></div>
我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字
<br>
我是文字
<br>
我是文字
</body>
</html>

注意一下,background-attachment: scroll;是默认的，也就是说屏幕跟文字一起走.

效果：

在这里插入图片描述

背景缩写

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{
    
    padding: 0px;margin: 0px;}
		div
		{
    
    
			width: 500px;
			height: 500px;
			background: red url(images/girl.jpg) no-repeat left bottom;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

注意一下**,背景属性缩写的格式
background: 背景颜色背景图片平铺方式关联方式定位方式;**

效果;

在这里插入图片描述

背景图片和插入图片区别

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{
    
    padding: 0px;margin: 0px;}
		 div{
    
    
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .box1{
    
    
            background-image: url(images/girl.jpg);
            background-repeat:no-repeat;
            background-position: right bottom;
        }
	</style>
</head>
<body>
<div class="box1">我是文字</div>
<div class="box2">
    <img src="images/girl.jpg" alt="">
    我是文字
</div>
</body>
</html>

注意一下,
特点：区别：
背景图片仅仅是一个装饰, 不会占用位置
插入图片会占用位置

背景图片有定位属性, 所以可以很方便的控制图片的位置
插入图片没有定位属性, 所有控制图片的位置不太方便

插入图片的语义比背景图片的语义要强, 所以在企业开发中如果你的图片想被搜索引擎收录, 那么推荐使用插入图片

效果：

在这里插入图片描述

css精灵图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>40-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>

注意一下,精灵图都用负数啊.记住,精灵图主要用的是定位·背景background-position
效果：
在这里插入图片描述