9.背景样式-CSS基础

一、背景样式

在CSS中，背景样式包括两个方面：背景颜色、背景图片。

在Web2.0 时代，对于元素的背景样式，我们都是使用CSS属性来实现。但在Web1.0时代,都是使用background或者 bgcolor这两个HTML属性（不是CSS属性）来为元素定义背景颜色或背景图片。

1.常用背景样式属性

属性	说明
background-color	定义背景颜色。
background-image	定义背景图片地址。
background-repeat	定义背景图片重复。
background-position	定义背景图片位置。
background-attachment	几乎用不上。定义背景图片固定。

二、背景颜色（background-color）

在CSS中，使用background-color属性来定义元素背景颜色。

1.背景图片固定

（1）语法格式

background-color:颜色值;

① 两种颜色值

颜色值有两种：

关键字

16进制RGB值

Ⅰ.color属性与background-color属性异同

关键字就是颜色的英文名称。这和03-字体样式.md中的color属性取值相同，但color属性是定义字体颜色，而background-color属性是定义背景颜色。

三、背景图片（background-image）

在CSS中，使用background-image属性为元素定义背景图片。

1.背景图片的使用

（1）语法格式

background-image:url(图片路径);

① 示例

Ⅰ.例1

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>背景样式</title>
        <!-- <link rel="stylesheet" type="text/css" href="../css/边框样式.css"/> -->
        <style type="text/css">
            div{
                width:224px;
                height: 224px;
                background-image: url(../作业/images/js3.jpg);    /*引入背景图片*/
            }
            span{
                color: #00FFFF;     /*定义字体样式，设置字体颜色*/
            }

        </style>
    </head>
    <body>
        <div>
            <span>
                是毛毛啊(●'◡'●)
            </span>
        </div>
    </body>
</html>

背景图片(background-image).png

（2）background-image与img属性异同

① 设置宽高

在上例中，若是不为div元素设置width、height属性是不会显示图片的，因为没有设置时宽度和高度都为0，所以背景图片不会显示，所以在使用background-image属性前一定要看看元素是否设置了宽高。

而在img元素中设置width、height属性，是定义了图片的大小。

② 用法

背景图片是使用CSS来实现的，而图片是使用HTML来实现的。

③ 用途

大多数情况下都是使用图片img元素来实现，但在某些场合无法使用图片的的时候再考虑背景图片。

四、背景图片重复（background-repeat）

在CSS中，使用background-repeat属性来定义背景图片的重复方式。

1.背景图片重复的使用

（1）语法格式

background-repeat:取值;

① background-repeat属性值

属性值	说明
repeat	在水平方向和垂直方向上同时平铺（默认值）
repeat-x	只在水平方向(x轴)上平铺
repeat-y	只在垂直方向(y轴)上平铺
no--repeat	不平铺

② 示例

Ⅰ.例1

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>背景样式</title>
        <!-- <link rel="stylesheet" type="text/css" href="../css/边框样式.css"/> -->
        <style type="text/css">
            div{
                width:160px;
                height: 160px;
                border: 1px solid #66A9FE;
                background-image: url(../img/favicon.ico);  /*引入背景图片，16*16*/
            }
            #div2{
                background-repeat: repeat-x;    /*只在水平方向(x轴)上平铺*/
                border: 1px solid orangered;
            }
            #div3{
                background-repeat: repeat-y;    /*只在垂直方向(y轴)上平铺*/
                border: 1px solid #000000;
            }
            #div4{
                background-repeat: no-repeat;   /*不平铺*/
            }
        </style>
    </head>
    <body>
        <div id="div1"></div>   <!--默认，水平垂直方向同时平铺-->        
        <div id="div2"></div>
        <div id="div3"></div>
        <div id="div4"></div>
    </body>
</html>

背景图片重复(background-repeat)示例1.png

（2）元素大小必须大于图片大小

元素的宽度和高度必须大于背景图片的宽度和高度，才会有重复效果。

五、背景图片位置（background-position）

在CSS中，使用background-aposition属性来定义背景图片的位置。

1.背景图片位置的使用

（1）语法格式

background-position:像素值/关键字;
<!--属性常用取值有2种: 关键字、像素值-->

① 像素值

Ⅰ.语法格式

background-position:水平距离 垂直距离;

水平距离和垂直距离这两个数值之间要用空格隔开，二者取值都是像素值。

② 关键字

Ⅰ.语法格式

background-position:水平距离关键字 垂直距离关键字;

Ⅱ.关键字取值

属性值	说明
top left	左上角
top center	靠上居中
top right	右上
left center	靠左居中
center center	正中
right center	靠右居中
bottom left	左下
bottom center	靠下居中
bottom right	右下

③ 示例

Ⅰ.例1

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>背景样式</title>
        <!-- <link rel="stylesheet" type="text/css" href="../css/边框样式.css"/> -->
        <style type="text/css">
            #div1{
                width:1000px;
                height: 500px;
                border: 1px solid #66A9FE;
                background-image: url(../img/pika.jpg); /*引入背景图片，16*16*/
                background-repeat: no-repeat;           /*不平铺*/
                background-position: top right ;        /*右上*/
            }
        </style>
    </head>
    <body>
        <div id="div1"></div>
    </body>
</html>

背景图片位置(background-position)示例1.png

（2）实际开发

在实际开发中，background-position属性一般用于实现CSS Spirit（精灵图片）。

① CSS Sprites

CSS Sprites叫 CSS精灵或者雪碧图，是一种网页图片应用处理方式，其实就是把网页中一些背景图片整合到一张图片文件中。

再利用CSS的background-image、background-repeat、background-position的组合进行背景定位。

在网页访问中，客户端每需要访问一张图片都会向服务器发送请求，因此访问的图片数量越多，请求次数也就越多，造成延迟的可能性也就越大。所以，CSS Sprites技术加速的关键，并不是降低质量，而是减少个数，但随之而来的增加内存消耗，然而CSS Sprites图片繁琐的合成等缺点在网站性能提升面前，也就不足为道了。

Ⅰ.CSS Sprites 的优点：

减少了图片的字节。
减少了网页的http请求，从而大大的提高了页面的性能。
减少命名麻烦的问题

Ⅱ.CSS Sprites 的缺点：

在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景。
在宽屏，高分辨率的屏幕下的自适应页面，图片如果不够宽，很容易出现背景断裂。
CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的CSS，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动CSS。

六、背景图片固定（background-attachment）

在CSS中，使用background-attachment属性来定义背景图片是随元素一起滚动还是固定不动。

1.背景图片固定的使用

（1）语法格式

background-attachment:取值;

① background-attachment属性值

属性值	说明
scroll	随元素一起滚动（默认值）
fixed	固定不动

（2）实际开发

在实际开发中，background-attachment属性几乎用不上，了解即可。