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

background-color:

Document
		

			"box1">
		

		

			"box2">
		

		

			"box3">
		

		

			"box4">
		

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

效果：

background-image

Document
		

			"box1">
		

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

background-repeat:

Document
		

			"box1">
		

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

效果：

background-position:

Document
		

			"box1">
		

注意一下,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

Document
		

			
		
我是文字


我是文字


我是文字我是文字


我是文字


我是文字我是文字


我是文字


我是文字我是文字


我是文字


我是文字我是文字


我是文字


我是文字我是文字


我是文字


我是文字我是文字


我是文字


我是文字我是文字


我是文字


我是文字我是文字


我是文字


我是文字我是文字


我是文字


我是文字
我是文字我是文字


我是文字


我是文字我是文字


我是文字


我是文字我是文字


我是文字


我是文字我是文字


我是文字


我是文字我是文字


我是文字


我是文字我是文字


我是文字


我是文字我是文字


我是文字


我是文字我是文字


我是文字


我是文字我是文字


我是文字


我是文字我是文字


我是文字


我是文字我是文字


我是文字


我是文字我是文字


我是文字


我是文字我是文字


我是文字


我是文字


我是文字


我是文字

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

效果：

背景缩写

Document
		

			
		

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

效果;

背景图片和插入图片区别

Document
		

			"box1">我是文字
		

		

			"box2"> "images/girl.jpg" alt="">
    我是文字
		

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

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

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

效果：

css精灵图：

40-CSS精灵图
		

			"box">
		

注意一下,精灵图都用负数啊.记住,精灵图主要用的是定位·背景background-position 效果：