css sprites把许多小图集成化在1张照片上

日期:2021-03-15 类型:科技新闻 

关键词:制作小程序,小程序商城,扫码点餐小程序,微信小程序开店的步骤,牛刀小程序


在google中检索1下css sprites这个名字,会查出许多信息内容,而且伴随着SEO愈来愈被人们高度重视,选用这类技术性来开展照片提升的网站愈来愈多,中国几家大中型门户网网站无不仿效。如新浪,网易,搜狐。你免费下载1下她们的网站上的照片,你会看到她们将许多小照片所有集成化在1张照片上
在google中检索1下css sprites这个名字,会查出许多信息内容,而且伴随着SEO愈来愈被人们高度重视,选用这类技术性来开展照片提升的网站愈来愈多,中国几家大中型门户网网站无不仿效。如新浪,网易,搜狐。你免费下载1下她们的网站上的照片,你会看到她们将许多小照片所有集成化在1张照片上
这样做的益处是不言而语:
    加快照片显示信息 运用CSS技能减小HTTP恳求 利于网站提升seo

实际上基本原理十分简易,关键是运用css中的情况精准定位技术性来完成的。关键便是用1个特性background-position来操纵显示信息1张大照片中的1个特定尺寸的照片部位。
css sprites照片情况提升技术性
下面从1个较为趣味的事例来1步步动手能力制做1幅扑克牌,看看是怎样精准定位照片的。
最先大家剖析1下扑克牌,1幅扑克牌有两种色调,有4种图案设计黑桃、红心、梅花、方块。此外有J,Q,K,这3种是花牌。A~10中只用到4种图案设计,而3种花牌用到3张照片,而它们的部位是不一样的,但梳理起来就仅有几种转变,如A—7这是1种转变,它是3行3列的合理布局(A和2是它的特例),8—10就1种,它是4行3列。J,Q,K是1种(实际上它也是第1种的变种特例)。
了解了基本原理就好办了,大家先做出它们的照片来,1张1张来,黑桃、红心、梅花、方块大图各1张,小图各1张,J,Q,K图案设计各1张,情况图1张。
此外要做所有的数据照片13张,270度旋转的照片13张。
好了,全部的照片提前准备齐了,共有71张照片,嘿嘿,有点吓人,这么多照片,想不到吧(之后会详细介绍1个较为方便的做法,无需照片,先卖个关子,有点)
大家以黑桃10为例看看在其中的座标点,下图是在PS选用輔助线做好的实际效果:

图1
要留意的是每张牌下一部分的內容与上一部分是竖直旋转的,这也是为何将数据也做成照片的缘故。
因此大家能够将全部的照片在PS中排序组成在1起,如图2所示:

图2
在组成这张照片要留意的是,每张图全是详细的,不可以被其它照片重合,而且要精准测算好每一个照片的座标部位,例如它的左上角端点座标,和右下角端点座标,了解这两个座标点后,每张小照片的部位就可以所有测算出来了。
照片提前准备好了后,大家刚开始设计方案构造吧,由于黑桃10是全部扑克牌选用到照片数最多的,大家就以它为例。
HTML构造:

CSS款式:
我先界定1张扑克牌的总器皿的款式:
.card{width:125px;height:170px; position:absolute;overflow:hidden;border:1px #c0c0c0 solid;}
我给它设定固定不动的宽高值,并再加1个边框线,设定其肯定精准定位是为之后精准定位时打下伏笔。由于我将会会做不只1张扑克牌。之后在拓展时只必须给它再加left和top特性便可将它精准定位到不一样的地区。而且将它设定肯定精准定位后,其子器皿又能够对于它来精准定位。
我用span,b,em3种标识各自意味着3种不一样种类的照片,span用来表标正中间的照片,b用来表明数定,em用来表明数据下面的小标志。
上面的每一个span意味着1个座标点,将通用性的一部分写成1个款式,便于其它构造的启用,随后将它组成运用到1个座标点上,如<span class="A1 up1"></span>。其款式以下界定:
span{display:block;width:20px;height:21px; osition:absolute;background:url(images/card.gif) no-repeat;}
上面这个款式是界定正中间的10个黑桃照片器皿的通用性设定。将它们设定为块状,并固定不动尺寸,设定其肯定精准定位,让它能界定到你想特定的部位上。
.A1{left:20px;top:20px;}
这个款式便是精准定位器,偏位到特定的座标点上,其它的9个基本原理类似。
.up1{background-position:0 1px;}/*黑桃*/
.down1{background-position:0 ⑴9px;}/*竖直旋转的黑桃*/

这两个款式便是加载照片,由于每张片的在原图上的座标部位是不一样的,因此你要依据前面的照片的部位找出每个小照片的精准部位。
如今,你早已搭建了html构造,并给构造设定了款式,将全部內容组装起来,大家的黑桃10即使进行了,简易吧!
运作编码框

[Ctrl A 所有挑选 提醒:你可先改动一部分编码,再按运作]

好了,1张扑克牌进行,其它的扑克牌融会贯通。
大家还要加1张照片来完成扑克牌越过来的实际效果。这张照片由于要开展平铺,因此不加在上面的照片结合。如图3所示:

图3
最终,将全部內容综合性起来,1幅详细的扑克牌即使进行了!
运作编码框

[Ctrl A 所有挑选 提醒:你可先改动一部分编码,再按运作]

上1页12 3 下1页 阅读文章全文