CSS如何将图片叠加到一起?

发布网友 发布时间：2022-04-23 00:06

我来回答

共4个回答

懂视网 时间：2022-04-06 15:28

一、图像拼合

图像拼合就是单个图像的集合。

有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。

使用图像拼合会降低服务器的请求数量，并节省带宽。

二、图像拼合 - 简单实例

与其使用三个独立的图像，不如我们使用这种单个图像（"img_navsprites.gif"）：

有了CSS，我们可以只显示我们需要的图像的一部分。

在下面的例子CSS指定显示 "img_navsprites.gif" 的图像的一部分：

img.home
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}

实例解析：

这是使用图像拼合最简单的方法，现在我们使用链接和悬停效果。

三、图像拼合 - 创建一个导航列表

我们想使用拼合图像 ("img_navsprites.gif")，以创建一个导航列表。

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

#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('img_navsprites.gif') 0 0;}

#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}

#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}

实例解析：

现在开始每个具体部分的定位和样式：

四、图像拼合s - 悬停效果

现在，我们希望我们的导航列表中添加一个悬停效果。

:hover 选择器用于鼠标悬停在元素上的显示的效果

提示： :hover 选择器可以运用于所有元素。

我们的新图像 ("img_navsprites_hover.gif") 包含三个导航图像和三幅图像：

因为这是一个单一的图像，而不是6个单独的图像文件，当用户停留在图像上不会有延迟加载。

我们添加悬停效果只添加三行代码：

#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}

实例解析：

热心网友 时间：2022-04-06 12:36

1、打开vscode，创建一个html页面。

2、在测试页面的同级目录，添加一张演示图片。

3、在测试页面中添加一个div标签，在标签内部添加一个img图片标签，设置图片的src地址。

4、在div的标签中，直接书写css的样式，设置div的宽度为500像素，高度为300像素，边框为1像素的红色框。再次在浏览器中打开，就可以看到图片，并没有填满整个div的空间。

5、想要让图片充满整个div，只需要对图片设置高宽都是100%即可。此处为了演示，将所有的img标签都设置成了100%，而且，使用的是外部css的书写形式。

6、如果图片使用的是背景图，不是img标签的形式，图片默认会在x和y轴重复，并不会拉伸，最终仍然填满了这个div的空间。

7、如果想要背景图也拉伸填满整个div空间，就需要设置背景图的，background-size: 100% 100%。

热心网友 时间：2022-04-06 13:54

热心网友 时间：2022-04-06 15:29