CSS 背景图像（内附图像精灵案例）

最新推荐文章于 2024-09-13 09:10:07 发布

lerrel1

最新推荐文章于 2024-09-13 09:10:07 发布

阅读量131

点赞数

文章标签： css 前端学习

本文链接：https://blog.csdn.net/lerrel1/article/details/131867828

版权

一. 背景图像

background-image 属性指定用作元素背景的图像。

注：使用背景图像时，请使用不会干扰文本的图像。

 div{
       background-image: url(img/paper.jpg);
       width: 700px;
       height: 500px;
    }

1.1 背景重复

默认情况下， background-image 属性在水平和垂直方向上都重复图像。

水平重复背景图像： background-repeat: repeat-x;

垂直重复背景图像： background-repeat: repeat-y;

不重复背景图像：background-repeat: no-repeat;

1.2 背景位置

background-position 属性用于指定背景图像的位置。

 div{
       background-image: url(img/paper.jpg);
       width: 700px;
       height: 500px;
       background-possition：right top;
    }

1.3 简写背景属性

如需缩短代码，也可以在一个属性中指定所有背景属性。它被称为简写属性。

div {             /*颜色*/     /*图片位置*/      /*背景重复*/ /*背景位置*/
      background: #ececec url("objective_bg.png") no-repeat right top;
    }

1.4 图像精灵

图像精灵是单个图像中包含的图像集合。

包含许多图像的网页可能需要很长时间才能加载，同时会生成多个服务器请求。

使用图像精灵将减少服务器请求的数量并节约带宽。

图像精灵示例：

<!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>
        div a{
            display: inline-block;
            width: 44px;
            height: 44px;
            background-image: url(img/navsprites_hover.gif);
        }
        .home{
            background-position: 0 0; 
        }
        .next{
            background-position: -45px 0px;
        }
        .prev{
            background-position: -90px 0px;
        }
        .home:hover{
            background-position: 0 -45px;
        }
        .next:hover{
            background-position: -45px -45px;
        }
        .prev:hover{
            background-position: -90px -45px;
        }
    </style>
</head>
<body>
    <div>
        <a class="home" href="#"></a>
        <a class="next" href="#"></a>
        <a class="prev" href="#"></a>
    </div>
</body>
</html>