扫一扫微信二维码
扫一扫微信二维码
事实上我不想在网页的HTML代码中嵌入图像，因为它们代表的只是视觉上的东西，而不是内容上的体现，因此我将它们和其它一些有代表性的部分放在CSS之下控制。 这个方法将使你更加方便地控制页面，让其变得更加漂亮。为了做出环绕的效果，我利用了CSS背景图像:使用这些背景图像的目的是要更好地适应CSS的布局，我们将这些图像嵌入层的背景中。
在这里你可以看见我是怎样定义图片的大小的(19px*37px)，而且在每个图片的末端有相应的背景图像。然后将这两幅图片放置在预先确定好了的线性对象里边。当然很多这些原理都是可以重复使用的，因此你最后的CSS代码不需要很大。这个方法的唯一缺点就是它不能用来调整动态的图片的大小，如果你的层比图像小的话，它将被忽略，如果你的层比图像大的话，它将反复被填进空白区。但是你很有可能就是不希望图像在运作中的任何位置都能被觉察到。
CSS动态图像技术
给CSS文本菜单赋予动态的技术，例如网页的左侧菜单，这种菜单现在被越来越多的人所喜爱。但是我不认为我曾经看见过这种技术:一个纯粹使用CSS来实现这一效果的技术。它让菜单拥有图像转换功能，这里的问题就是我们用纯CSS去实现这一效果。下面使用两个步骤来世实现菜单的图像变换技术。第一步仅仅变动背景颜色;第二步，就是精确的旋转多维图像。(警告:这门技术的缺点就是其中一些技术不能与Opera 6一起使用，虽然他们在Opera 7中是一种很好的技术。)
变换背景图像1
如果这是一幅透明的背景图像，那我们就可以非常容易地使用选择器改变其背景色。 在本例中图像被嵌入在HTML资源中，这就意味着在不支持CSS2标准的浏览器中它也会显示(除了文本浏览器!). 其代码将比下面的例子复杂，但它能在我尝试的所有浏览器中运作。要注意的是在实现效果的过程中一次仅能下载一张图像。
变换背景图像2
这个版本相对版本1是非常简单的。其图像是CSS背景图像，因此不支持CSS2标准的浏览器中不会显示出来:但是我们提供了一个可选择的文本链接，这是一个被淘汰了的例子。
旋转按钮1
现在针对不需要JS脚本语言进行支撑的旋转图像讲述一些新的方法，第一种方法是使用背景图,利用a:hover特性，当指针指向图像时改变背景图,因此如果关闭了CSS的话图像就不会显示,同时我们还可以获得可选择的文本链接.该方法支持IE6,Netscape 7, Mozilla and Opera 7,但不支持Opera 6.第三类按钮状态可以通过相似方法:活跃选择器来传给图像。读者可以把这种方法当作是练习做一做。
旋转按钮1a
这是个不同于按钮1的按扭.我们再次使用一幅CSS背景图,但是不是使用一个旋转选择来加载一幅新的图像给按钮的其它状态,我们使用CSS来改变现有图像的位置.这样使用如果图像太大,则背景图像被修剪.因此我们的按钮是单独的图像包含两种按钮状态.通常显示上半部图像,但是当按钮旋转图像则替换显示下半部.因此这是完整的图像.使用这种方法这里有两种优势.首先,如果访问按钮时为了减少下载数据数量-仅下载一幅图像带替两幅-因此这是更快的.其次,在第一次访问时没有延迟去等待下载第二幅图像:它已经在这了.不需预载复杂的图像。不利方面就是如果按钮不被访问,则一些位带宽被浪费了,这些是在使用时的观念,对按钮1,HTML和CSS也是如此.主要的差异在:旋转选择。
结转按钮2
如下,另一途径实现CSS旋转图像为使用图像的Z索引特性,Z索引控制显示哪个元素在最顶层.不幸的是,它不支持IE6或Opera 6.Opera 7, Mozilla 和 Netscape 7能工作,但是在这种情况下Mozilla是如此的慢,在CSS2浏览器旋转不工作,仅顶层图像显示正常.在非CSS2浏览器顶层和旋转图像并排显示,看起来是古怪的. Internet Explorer的工作区包含一个小处理程序,如果图像背景色改变了,则Z索引也改变,Internet Explorer获得变化进行相关工作.菲利普通过改变三原色值改变颜色(例如将#ffffff改为#fffffe)如此很小的改变效果都是显著的。
免费电话咨询
18955177249