背景图像和精灵图-CSDN博客

本文链接：https://blog.csdn.net/Z03_gg/article/details/132196598

背景图像

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

默认情况下，图像会重复，以覆盖整个元素。

一、重复背景

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

图像仅在水平方向重复**（ background-repeat: repeat-x; ）**

如需垂直重复图像，请设置 background-repeat: repeat-y;

background-repeat: no-repeat; 属性还可指定只显示一次背景图像：

二、背景位置

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

div.right-top {
    width: 440px;
    height: 290px;
    box-sizing: border-box;
    padding: 5px 15px 5px 55px;
    background-image: url('img/objective_bg.png');
    background-repeat: no-repeat;
    background-position: right top;
}

在这里插入图片描述

三、简写背景属性

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

实例：

div {
    background: #ececec url("objective_bg.png") no-repeat right top;
}

等同于

div {
    background-color: #ececec;
    background-image: url("objective_bg.png");
    background-repeat: no-repeat;
    background-position: right top;
}

效果图和上图一样

四、图像精灵

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

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

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

1、简单的例子

我们使用以下单幅图像（“navsprites.gif”）而不是使用三幅单独的图像：
在这里插入图片描述

通过使用 CSS，我们可以仅显示所需图像的某个部分。

#home {
    width: 44px;
    height: 44px;
    background: url(navsprites.gif) 0 0;
}

在这里插入图片描述

2、创建导航列表

我们希望使用精灵图片（“navsprites.gif”）来创建一个导航列表。

我们将使用 HTML 列表，因为它可以是链接，同时还支持背景图片

3、图像精灵-悬停效果

现在，我们要向导航列表中添加悬停效果。

:hover 选择器可用于所有元素，而不仅限于链接。

我们的新图像（“navsprites_hover.gif”）包含三幅导航图像和三幅用于悬停效果的图像：

在这里插入图片描述

因为这是一幅图像，而不是六个单独的文件，所以当用户将鼠标悬停在图像上时，不会有加载延迟。

我们仅添加三行代码来实现悬停效果：

#home a:hover {
    background: url('img/navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
    background: url('img/navsprites_hover.gif') -45px -45px;
}
#next a:hover {
    background: url('img/navsprites_hover.gif') -90px -45px;
}