CSS 基础（023_图片小精灵）

最新推荐文章于 2023-04-17 11:46:36 发布
最新推荐文章于 2023-04-17 11:46:36 发布
阅读量1.1k 收藏
点赞数
分类专栏： CSS 文章标签： css

原始网址：http://www.w3schools.com/css/css_image_sprites.asp

翻译：

CSS 图片小精灵（CSS Image Sprites）

图片小精灵（Image Sprites）

图片小精灵是指将图片集放入单张图片中。
含有很多图片的 web 页面加载时间会很长，还会产生多个服务器请求。
使用图片小精灵将减少服务期请求数、节省带宽（bandwidth）。

图片小精灵 - 简单示例

我们使用单张图片（"img_navsprites.gif"）取代 3 张独立的图片：
图片小精灵（Image Sprites）

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
    margin: auto;
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
}
</style>
</head>
<body>
    <div>
        <p><img src="http://www.w3schools.com/css/img_navsprites.gif" alt="navigation images"></p>
    </div>
</body>
</html>

使用 CSS，我们可以只显示整张图片中我们需要的部分。
在下列示例中，CSS 指定 "img_navsprites.gif" 图片的哪个部分被显示：

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

图片小精灵（Image Sprites）

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
    margin: auto;
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
}

#home {
    width: 46px;
    height: 44px;
    background: url('http://www.w3schools.com/css/img_navsprites.gif') 0 0;
}

#next {
    width: 43px;
    height: 44px;
    background: url('http://www.w3schools.com/css/img_navsprites.gif') -91px 0;
}
</style>
</head>
<body>
    <div>
        <img id="home" src="http://www.w3schools.com/css/img_trans.gif">
        <br />
        <br />
        <img id="next" src="http://www.w3schools.com/css/img_trans.gif">
    </div>
</body>
</html>

示例解释：

  • <img id="home" src="img_trans.gif"> - 只是为了定义一张小的透明图，因为 src 属性不能为空。我们使用 CSS 指定它以背景图显示。
  • width: 46px; height: 44px; - 定义我们想要使用的图片部分。
  • background: url(img_navsprites.gif) 0 0; - 定义背景图以及它的位置（left 0px, top 0px）。

这是使用图片小精灵最简单的方式，现在，我们想要使用链接和 hover 效果对它进行扩展。

图片小精灵 - 创建导航列表

我们想要使用图片小精灵（"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;
    background: url('img_navsprites.gif') 0 0;
}

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

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

图片小精灵 - 创建导航列表

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#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;
    background: url('http://www.w3schools.com/css/img_navsprites.gif') 0 0;
}

#prev {
    left: 63px;
    width: 43px;
    background: url('http://www.w3schools.com/css/img_navsprites.gif') -47px
        0;
}

#next {
    left: 129px;
    width: 43px;
    background: url('http://www.w3schools.com/css/img_navsprites.gif') -91px
        0;
}
</style>
</head>
<body>
    <ul id="navlist">
        <li id="home"><a href="http://www.w3schools.com/css/default.asp"></a></li>
        <li id="prev"><a href="http://www.w3schools.com/css/css_intro.asp"></a></li>
        <li id="next"><a href="http://www.w3schools.com/css/css_syntax.asp"></a></li>
    </ul>
</body>
</html>

示例解释：

  • #navlist {position:relative;} - 设置相对定位以允许内部可进行绝对定位。
  • #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - 将内外边距设置为 0，去掉列表式样，所有列表项均为绝对定位。
  • #navlist li, #navlist a {height:44px;display:block;} 所有图片的高度均为 44px 。

现在，我们开始对每个特定部分进行定位和样式化：

  • #home {left:0px;width:46px;} - 定位至最左侧，图片宽度设置为 46px 。
  • #home {background:url(img_navsprites.gif) 0 0;} - 定义背景图以及对它进行定位（left 0px, top 0px）。
  • #prev {left:63px;width:43px;} - 向右定位 63px（#home width 46px + 各个item之间的额外空间），宽为 43px 。
  • #prev {background:url('img_navsprites.gif') -47px 0;} - 定义背景图向右 47px（#home width 46px + 1px line divider）
  • #next {left:129px;width:43px;} - 定位向右 129px（start of #prev is 63px + #prev width 43px + extra space），宽 43px 。
  • #next {background:url('img_navsprites.gif') -91px 0;} - 定义背景图向右 91px（#home width 46px + 1px line divider + #prev width 43px + 1px line divider）。

图片小精灵 - 悬停效果（Hover Effect）

现在，我们想要对导航列表添加悬停效果（hover effect）。

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

我们的新图片（"img_navsprites_hover.gif"）包含了 3 张导航图片以及 3 张用于悬停效果的图片：
图片小精灵 - 悬停效果（Hover Effect）
由于这是单张图片，而不是 6 个独立文件，当用户鼠标悬停图片之上的时候将没有加载延迟（no loading delay）。

添加悬停效果我们只增加了 3 行代码：

#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;
}

图片小精灵 - 悬停效果（Hover Effect）

<!DOCTYPE html>
<html>
<head>
<style>
#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;
    background: url('https://i-blog.csdnimg.cn/blog_migrate/22b1a074cc82aaec341cf8ea788b99ae.gif') 0 0;
}

#prev {
    left: 63px;
    width: 43px;
    background: url('https://i-blog.csdnimg.cn/blog_migrate/22b1a074cc82aaec341cf8ea788b99ae.gif') -47px 0;
}

#next {
    left: 129px;
    width: 43px;
    background: url('https://i-blog.csdnimg.cn/blog_migrate/22b1a074cc82aaec341cf8ea788b99ae.gif') -91px 0;
}

#home a:hover {
    background: url('https://i-blog.csdnimg.cn/blog_migrate/22b1a074cc82aaec341cf8ea788b99ae.gif') 0 -45px;
}

#prev a:hover {
    background: url('https://i-blog.csdnimg.cn/blog_migrate/22b1a074cc82aaec341cf8ea788b99ae.gif') -47px -45px;
}

#next a:hover {
    background: url('https://i-blog.csdnimg.cn/blog_migrate/22b1a074cc82aaec341cf8ea788b99ae.gif') -91px -45px;
}
</style>
</head>
<body>
    <ul id="navlist">
        <li id="home"><a href="http://www.w3schools.com/css/default.asp"></a></li>
        <li id="prev"><a href="http://www.w3schools.com/css/css_intro.asp"></a></li>
        <li id="next"><a href="http://www.w3schools.com/css/css_syntax.asp"></a></li>
    </ul>
</body>
</html>

示例解释：

  • #home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - 对所有 3 张悬停图片，我们指定了相同的背景位置，只是递降 45px 。
柯南道尔2606
关注
专栏目录
css精灵，又叫css背景精灵
weixin_72303943的博客
07-12 602
css精灵，又叫css背景精灵
css 剪辑图片_css实现图片剪裁
weixin_39929096的博客
12-21 2795
也许，你会遇到这样的情况，UI给你一张图片，然而根据实际情况，比如需要适配XXX手机，或者需要把图片形状搞好看一点，会让前端人员进行图片剪裁工作。现在我们就已这个例子来对图片进行剪裁html代码如下 css代码如下.img-container {width: 300px;}.img-container img {width: 100%;}图片下面进行剪裁现在的需求是这样的：原来尺寸是wi...
每日知识总结
m0_73801853的博客
09-28 179
CSS精灵英文叫法 `CSS sprites`，通常被解释为“CSS 图像拼合” 或 “CSS 贴图定位”，其实就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS “background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position 精确的定位出背景图片的位置。- hidden 隐藏该元素但是该元素所占的内存空间还存在，即“隐身效果”。##### 2.1.1 实现步骤。
CSS中的精灵技术
courageFei的博客
07-29 5405
CSS中的精灵技术 在制作网页的过程中我们会用很多个细碎的小图，每当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。 由于网页中细碎的小图片很多，会导致向服务器发送N多次请求，这样不仅降低了页面的加载速度，也会影响服务器的效率。 **为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。 聪明机智的前辈们研究出了CSS精灵技术（也称CSS ...
CSS精灵
weixin_52629158的博客
04-03 216
css精灵，又叫css背景精灵。“css精灵”，英语css sprite，所以也叫做“css雪碧”技术。是，该方法是。css精灵有什么优点，就是。比如4张小图片，原本需要4个http请求。但是用了css精灵，小图片变为了一张图，http请求只有1个了。淘宝网的精灵图：用fireworks精确控制精灵:。(1) 先在原图（淘宝网的精灵图），用切片，框选出 你要显示图的 大小（你用(2) 我们使用fireworks中的切片绘制矩形。。
CSS 精灵
m0_73782968的博客
02-25 204
Adobe Photoshop，简称“PS”]，是由Adobe 开发和发行的[图像处理软件]。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。ps有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。
html_css_responsive_pixie_opdracht
03-17
小精灵 Julie kregen de opdracht van电子商务公司的P​​ixie om hun设计和实现者： Beschrijving opdracht： 在网站bestaat uit 5的页面上： index.html products.html single-product.html about.html ...
css实现图片虚化_css怎么虚化背景图片？css虚化背景图片的方法介绍
weixin_31154627的博客
12-24 3768
在看到背景图片虚化的时候，我相信很多朋友都会想到去用ps去实现这个效果，那么用css能实现背景图片的虚化效果吗？接下来的这篇文章就来给大家介绍一下css设置背景图片虚化的方法。在虚化背景时使用的是filter属性，我们就是利用filter属性中blur来设置虚化背景的。代码如下：img {filter: blur(5px);}css虚化背景的效果如下：上述这个方法只是简单的利用css将背景图片虚化...
css实现div从左到右出现,css横向排列_css div 实现图片从左向右自动横向排列
weixin_29052717的博客
08-03 2506
摘要 腾兴网为您分享:css div 实现图片从左向右自动横向排列，追书神器，中英翻译，优酷，武魂传说等软件知识，以及宝app，安卓串口，爱奇艺看图软件，爆枪英雄好号送，手机短信加密软件，阳光厨房，cad插件,玫瑰情人网，新华词典，实时备份，华图教育题库，网上宿迁，如果英语，x管理器，净之泉等软件it资讯，欢迎关注腾兴网。我们先来看看效果图片再一步步分析实例代码了。 首先我们来看这一块代码。 dl...
CSS——CSS基础知识
流楚丶格念的博客
06-26 8070
文章目录CSS的发展历程CSS 网页的美容师CSS初识引入CSS样式表（书写位置）内部样式表行内式（内联样式）外部样式表（外链式）三种样式表总结（位置）CSS样式规则外链案例内链案例 CSS的发展历程 从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生
CSS Sprites（精灵图）
Sumshine12.5
02-09 1653
引入 当用户访问网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。然而一个网页中往往会有很多小背景图片作为修饰，当网页背景图像过多时，服务器就会频繁的接收发送请求，这会大大降低页面的加载速度，为了有效的减少服务器接收和发送请求的次数，提高页面的加载速度，就出现了css精灵技术 （CSS Sprites） CSS精灵并不是很高深的技术，CSS精灵是一种处理网页背景图像的...
CSS——CSS精灵技术（sprite）※
流楚丶格念的博客
07-03 4423
文章目录CSS精灵技术（sprite） 小妖精 雪碧精灵技术产生的背景精灵技术本质精灵技术的使用制作精灵图注意事项结束语：精灵图案例 CSS精灵技术（sprite） 小妖精 雪碧 精灵技术产生的背景 图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。 然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的
【CSS】CSS 精灵技术 Sprite ( 精灵技术需求 | CSS 精灵技术简介 | 代码示例 )
最新发布
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-17 865
一、精灵技术需求 二、CSS 精灵技术 三、CSS 精灵技术代码示例
CSS精灵图(Sprite)笔记
Z_CH8648的博客
11-27 894
网站上有很多小图标，这些小图标如果使用单独的图片，会对服务器产生大量的连接请求，造成堵 塞；精灵图是把许多小图标整合成一张图片，减少连接请求，增加页面显示速度。
CSS Sprites精灵图的使用
小马过河
08-08 4487
CSS Sprite是什么？ CSS Sprite直译为“CSS精灵”，也被称为通常被解释为“CSS图像拼合”或“CSS贴图定位”，是一种网页图片应用处理方式。其实就是把多张小图片整合到一张图片中去，再利用CSS的“background-image”，“background-repeat”，“background-position”进行背景定位，background-position可以用数字能...
HTML入门学习笔记--CSS背景和精灵图(5)
qq_孤小狼的博客
01-11 2098
33-背景颜色1.如何设置标签的背景颜色?在CSS中有一个background-color:属性, 就是专门用来设置标签的背景颜色的取值: 具体单词 rgb rgba 十六进制快捷键:bc background-color: #fff;34-背景图片1.如何设置背景图片?在CSS中有一个叫做background-image: url();的属性, 就是专门用于
CSS精灵图-sprite
NewHouser的博客
10-20 287
CSS精灵图是把一堆小的图片整合到一张大的图片上，这样可以减轻服务器对图片的请求数量，再利用CSS的 background-image，background- repeat，background-position 组合进行定位
HTML网页精灵图的使用
热门推荐
郭贝贝的博客编程
06-11 1万+
精灵图的使用我们在制作网页的时候有些图片是在一起的，没有办法进行插入图片，这样精灵图的使用就帮助我们解决了这一问题。一下方式为例：图片：精灵图使用的代码图片：     具体为：.good{ height:30px; margin-left:-5px; background:url(image/icon.gif) no-repeat; background-posit...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值