CSS之背景精灵

目录

背景色

背景图属性

背景图引入

背景图重复方式

1、不重复

 2、水平方向重复

3、垂直方向重复 

4、重复 

背景图定位 

综合写法

背景图大小 

1、直接设置

2、覆盖标签 

3、适应标签

背景精灵效果

---

背景色

background-color: green;
background-color: rgb(0,255,0);
background-color: rgba(0,255,0,0.3);/* 可以同时设置背景颜色和背景透明度 */
background-color: #00ff00;

   注意：设置背景色可以通过单词，RGB，RGBA，十六进制的方式进行调色。

背景图属性

背景图引入

background-image: url(dog.png);

   注意：我们一般是通过url属性来引入图片。

背景图重复方式

1、不重复

background-repeat: no-repeat;

示图：

注意：背景图片默认是重复的，但是一般我们只需要一张图片，所以需要设置no-repeat。

 2、水平方向重复

background-repeat: repeat-x;

示图：

注意：水平方向重复一般是图片沿着X轴方向不断向右重复，直到占满标签整个宽度。

3、垂直方向重复 

background-repeat: repeat-y; 

示图