浅谈css中图片定位之所有图标放在一张图上

  发布时间:2014-03-05 10:19:06   作者:佚名   我要评论
本文为大家介绍下如何将所有图标放在一张图上,这里需要学习下css中的图片定位,下面有个不不错的示例,大家可以参考下
如今做网页为了使网站丰富多彩,富于表现力,往往需要应用大量的图片/图标。如何处理这些图片,使其尽量不影响网页载入,解析等速度,是一个不大不小的问题。如果你的网站用各种图标图案装饰的靓丽无比,但是需要等待较长的时间加载,那么相信很多用户会等不及而离开。尽量将图片做的小些,可能是大部分人选择的解决之道。但是100张1kb的图片加载与一张100kb的图片加载,这之间又是不同的,这涉及到网站服务器的同时连接数,网络质量等。但是,显然,加载一张图片要远比加载多张图片简便的多。

还有最重要的一点,就是涉及到用户动作才表现的图片,例如鼠标移上/移下的图片切换,由于是由动作触发的,所以在动作触发前是不会加载的,而当需要时再从服务器下载,这之间又需要一定的时间,如果图片较大,此时网络质量又不太好,就会出现页面空白。而以上这一切,如果你将所有需要的图片放到一张图片上,这些问题就都不会有了。因为在网页加载时这张图片就已经从服务器上下载来了,所以不会出现丢失,未加载等现象。

对于老鸟来说,这一点可能已经成为一种意识,他们都很自觉,下意识的就会这么做,但是对于新手,初接触网页的人来说,可能还停留在用到哪张图片就单独处理哪张图片的阶段。我当然也是新手,之前在做网站右上角的一张图片切换时,就是做了两张不同的图片,结果往往容易碰到网速不好时,第二张图片不能及时加载上来。于是今天便将其处理了一下,整到了一张图片上。我比较懒,后期往网站上添加一些内容时,懒得去动以前的东西,所以后期某些地方加入的图标啥的都是单独一张小图标加上去的,也没与之前的整合。但是,有一些尺寸稍大的,就不行了,就像我今天处理的,总是有延迟。现在我就拿其做个例子,说说css中图片定位及整合的好处。

为了使某处富于表现力,比如菜单,导航等,往往会用到鼠标移上移下的不同样式表现,最简单的就是图片切换了。比如两张图片,一张用于鼠标未指向时,另一张用于鼠标移上去时。为了使第二张图片无缝载入,就需要将这两张图片放到一起。比如本站右上角的那图案,初始时是灰色,鼠标移上则变为彩色。即是用到了此张图片:

 

css中定义:

复制代码
代码如下:

.ltlogo a{background:url("img/ltlogo.gif") no-repeat left 15px;}
.ltlogo a:hover{background:url("img/ltlogo.gif") no-repeatleft bottom;}

对了,有必要说一下网页对于图片的处理,seo中建议图片尽量不直接写入网页。对于需要用一张图片,传统做法是<img src=“源图片”/>引入。因为图片搜索引擎无法收录,所以我推荐用css表现。如何做呢?举个实例吧:

比如要将一张200X50的图片放入页面,传统做法是

复制代码
代码如下:

<img src=“源图片”height=”200px” width=”50px”/>

而用css,则可以在页面中写入<span id=”img”></span>,css中这样写:

复制代码
代码如下:

#img{display:block;width:50px;height:200px;background:url(源图片);}

为什么要用display:block;?display:block;就是将行内元素强行转化为块级元素。此处作用就是将整个宽200高50的区域整个块级化。

回到正文来,我此处就是用css装入这张图片的。上面css中我只写了重要的部分,其余省略。加粗部分“left 15px”就是定位图片了,相比较而言,这个只有两张图片的比较容易。left即是水平方向从最左端加载,15px是针对我自己的网站而言,由于图片所属整个层区域高度相对图片较大,所以需要图片往下靠一点。你可以理解为在整张图片上高度增加了15px。

第二个“left bottom”,就是鼠标移上去时的所需图片。第二张图片我放在最底部,所以垂直方向直接用bottom从底部定位。

上面是我自己的例子,关于大量处于同一张图片上的定位,以及如何处理位于同一张图片上的各个图标更容易等,下次再说。当然,我是初学者,所用名词、术语有所不当,所说内容有错误之处,老鸟经过,还望指教。网页制作

相关文章

  • CSS盒子模型、圆角边框、盒子阴影效果实现

    盒子模型是网页布局的基础,包括边框、外边距、内边距和实际内容,通过CSS可以控制盒子之间的距离及其外观,如边框样式、边框颜色等,重要属性包括padding和margin,分别控制内
    2024-10-18
  • CSS盒子模型、圆角边框、盒子阴影效果实现

    盒子模型是网页布局的基础,包括边框、外边距、内边距和实际内容,通过CSS可以控制盒子之间的距离及其外观,如边框样式、边框颜色等,重要属性包括padding和margin,分别控制内
    2024-10-18
  • CSS使用filter和backdrop-filter实现高斯模糊效果(示例代码)

    本文详细介绍了CSS3中的两个实现高斯模糊效果的API:filter和backdrop-filter,filter可以直接在图像或背景图上添加多种效果,而backdrop-filter则用于在元素后的区域添加效
    2024-09-26
  • CSS 中的overscroll-behavior属性详解

    overscroll-behavior是CSS中用于控制元素滚动边界行为的属性,可通过设置为auto、contain或none来指定当元素滚动超出边界时的处理方式,本文给大家介绍CSS 中的overscroll-be
    2024-09-26
  • css实现四角边框效果

    本文介绍了如何通过CSS实现具有四角边框的效果,使用了linear-gradient和background属性来创建边框,并设置了背景尺寸,文章还提供了Vue中图片资源引用的示例代码,适合想要为
    2024-09-24
  • CSS的:required和:optional伪类:如何增强表单字段的视觉识别

    在网页设计中,使用CSS的:required和:optional伪类可以有效增强表单字段的视觉识别,提升用户体验和表单的可访问性,这两个伪类分别用于区分必填和非必填字段,通过添加不同的
    2024-09-18
  • css边框修饰实现代码

    本文介绍了CSS中设置边框的几种主要属性,包括边框样式(如实线、虚线等)、边框宽度(可以单独设置每个方向的宽度)、边框颜色(支持单独为每个方向设置颜色)以及圆角边框
    2024-09-18
  • 如何利用CSS实现视差滚动和抖动效果

    通过CSS3和JS,实现前端炫酷的视差滚动和抖动效果,本文详细介绍了相关CSS样式和JS脚本,通过监听滚动条位置并调整元素的top属性来达到视差效果,当到达特定位置时,利用CSS动画
    2024-09-13
  • CSS文本超出后隐藏并显示省略号及其他浏览器兼容方案(推荐)

    在CSS中,可以通过简单的样式设置实现文本超出隐藏并显示省略号的效果,这些方法主要适用于WebKit内核的浏览器,对于其他浏览器,可采用JavaScript或CSS Fallback等方案,文
    2024-09-11
  • css 自定义变量 var()案例分析

    这篇文章主要介绍了css 自定义变量 var()案例分析,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,感兴趣的朋友跟随小编一起看看吧
    2024-08-28

最新评论