CSS切割背景应用补遗

原创 2007年09月29日 09:45:00
    上篇文章讲了一下合并图片,并利用CSS进行背景切割渲染的例子。这篇文章将是对上篇的一个补充,在平时的设计中可能会经常使用到下面将要讲的这个效果。

      这次将背景切割结合A(链接)的一些伪类来进行实际应用,以展示鼠标经过链接时出现不同的效果。

      直接进入正题,先看最终效果再说:

      [效果演示:http://www.doyoe.com/model/xhtmlcss/style/cssimg/2.htm

CSS部分:

html,body {
 font-family:Verdana,Arial;
 font-size:12px;
}
#list {
 margin:0;
 padding:0;
 list-style:none;
}
#list li {
 line-height:200%;
}
#list li a {
 padding-left:15px;
 background:url(skin/point_01.gif) 0 5px no-repeat;
}
#list li a:hover {
 background-position:0 -5px;
}

XHTML部分:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="飘零雾雨|edzmaster@gmail.com" />
<title>DY CSS切割背景应用补遗</title>
</head>
<body>
<h1>把图片做成一张,节省请求次数</h1>
<ul id="list">
 <li><a href="">测试用一张图片代替两张图片</a></li>
 <li><a href="">测试用一张图片代替两张图片</a></li>
 <li><a href="">测试用一张图片代替两张图片</a></li>
 <li><a href="">测试用一张图片代替两张图片</a></li>
 <li><a href="">测试用一张图片代替两张图片</a></li>
</ul>
</body>
</html>

       由例子中可以看到,当鼠标经过和离开链接时会有一个动画效果。其原理就是当鼠标经过时显示一张图片,当鼠标离开时显示另一张图片。按说这个效果需要两张图片来完成,而在这个例子中仅使用了一张图片,不同只是在鼠标的两种状态时改变图片的position,以此来达到相同的效果,从而又在原基础上减少了图片请求次数。 

      有兴趣的话,还可以将该技术扩展到滑动门菜单上,其实上面这个例子已初俱了滑动门菜单的一半效果了,只需少许扩展就OK。

      *注:并不是说不论什么时候合并图片都是好的,通常只将那些经常要用到的图片合并。

 

CSS在背景设计中的应用

  • 2011年12月31日 16:23
  • 15KB
  • 下载

CSS应用:复杂背景图案

通过线性渐变和通过径向渐变可以容易的构造出条纹背景(如果你还对线性渐变和径向渐变不了解,请参考我前面的文章线性渐变和径向渐变,你也可以在遇到困难的时候再去查阅),但他们能做的事情远不止于此,使用他们能...

CSS背景色镂空技术实际应用及进阶

本文地址:http://www.zhangxinxu.com/wordpress/?p=3545
  • henrypt
  • henrypt
  • 2016年12月14日 09:25
  • 85

CSS 多图片融合背景定位的应用于优缺点分析

1. 关键字, 例如: background-position: top right; 优点: 直观, 可用性高, 各浏览器中表现一致. 缺点: 缺少间隔尺寸. 三个垂直的 (top, cente...

CSS背景色镂空技术实际应用及进阶

一、背景色镂空?什么玩意? 今天我翻墙逛twitter的时候,见到了这种技术更为实际的应用。 看下图所示的效果截图: 问题:这些小图标是如何实现的呢? 当下,我们一般的做法...

用DIV+CSS切割多背景合并图片 CSS Sprites 技术

很久之前就在互联网网站和一些js插件中见过这种技术的应用,当时觉得很麻烦,就没有用,也没有去深究。 近段时间一直在做前台的一些东西,涉及到很多div+css的问题。这个东东我又碰到了,所以我花了...

用DIV+CSS切割多背景合并图片 CSS Sprites 技术

用DIV+CSS切割多背景合并图片 CSS Sprites 技术 博客分类: div+css   很久之前就在互联网网站和一些js插件中见过这种技术的应用,当时觉得很麻烦,就没有用...

CSS文字背景图

  • 2015年08月31日 16:58
  • 461KB
  • 下载

【CSS背景图片页面自适应充满屏幕】

【CSS背景图片页面自适应充满屏幕】 实现代码: body {                                         overflow: hidde...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS切割背景应用补遗
举报原因:
原因补充:

(最多只允许输入30个字)