CSS技术结合图像实现动态效果的菜单导航
本文介绍一些我们经常使用但很少关注的东西，在下面的叙述中我们假设你的CSS使用的是@import技术，因为这里CSS可能会让你对Opera 4失去信心。如果你把图像作为你的页面布局的一部分，在CSS的控制之下嵌入图像很可能是你不希望得到的结果如果你使用的是一个不支持CSS2标准的浏览器例如Opera 4。下面介绍一个例子，使用一些GIF图像去修饰圆角。
事实上我不想在网页的HTML代码中嵌入图像，因为它们代表的只是视觉上的东西，而不是内容上的体现，因此我将它们和其它一些有代表性的部分放在CSS之下控制。
这个方法将使你更加方便地控制页面，让其变得更加漂亮。为了做出环绕的效果，我利用了CSS背景图像:使用这些背景图像的目的是要更好地适应CSS的布局，我们将这些图像嵌入层的背景中。
在这里你可以看见我是怎样定义图片的大小的(19px*37px)，而且在每个图片的末端有相应的背景图像。然后将这两幅图片放置在预先确定好了的线性对象里边。当然很多这些原理都是可以重复使用的，因此你最后的CSS代码不需要很大。这个方法的唯一缺点就是它不能用来调整动态的图片的大小，如果你的层比图像小的话，它将被忽略，如果你的层比图像大的话，它将反复被填进空白区。但是你很有可能就是不希望图像在运作中的任何位置都能被觉察到。
CSS动态图像技术
给CSS文本菜单赋予动态的技术，例如网页的左侧菜单，这种菜单现在被越来越多的人所喜爱。但是我不认为我曾经看见过这种技术:一个纯粹使用CSS来实现这一效果的技术。它让菜单拥有图像转换功能，这里的问题就是我们用纯CSS去实现这一效果。下面使用两个步骤来世实现菜单的图像变换技术。第一步仅仅变动背景颜色;第二步，就是精确的旋转多维图像。(警告:这门技术的缺点就是其中一些技术不能与Opera 6一起使用，虽然他们在Opera 7中是一种很好的技术。)
变换背景图像1
如果这是一幅透明的背景图像，那我们就可以非常容易地使用选择器改变其背景色。
在本例中图像被嵌入在HTML资源中，这就意味着在不支持CSS2标准的浏览器中它也会显示(除了文本浏览器!). 其代码将比下面的例子复杂，但它能在我尝试的所有浏览器中运作。要注意的是在实现效果的过程中一次仅能下载一张图像。
变换背景图像2
这个版本相对版本1是非常简单的。其图像是CSS背景图像，因此不支持CSS2标准的浏览器中不会显示出来:但是我们提供了一个可选择的文本链接，这是一个被淘汰了的例子。
第 1 2 页
