CSS禅意花园 - 设计 - Night Drive（四）

点击数：21452012-08-10 10:22:04　来源: 海盈网络

    2.6.6 图片使用技巧

    现在页首和正文部分都已经完成，该考虑如何将那个黄色的徽章定位在页面右上角了。在将图片覆盖在其他图片上时，选用带有透明区域（这里是徽章投下的阴影）的图片所带来的好处就是无须考虑被覆盖图片上是什么内容o Shea自然可以选择在Photoshop中将原稿的各图层合并，然后将徽章以及其周围的阴影、被覆盖图片内容一起保存为GIF或JPG格式，这样即可保留住徽章漂亮的阴影。当然．Shea也可以抛弃掉那部分周围被覆盖的图片，只是将徽章本身保存为透明的GIF格式，但这样却无法留住徽章周围的阴影。

    但因为对作品来说，这个徽章并不是“必不可少”的，所以Shea并没有使用上述两种方法中任何一种，而是将其存为了PNG格式，这样也免去了很多不必要的麻烦。因为无论放置于什么地方，带有256级透明度的PNG图像都能完美地显示出阴影效果。

    PNG格式将在本书稍后部分详细介绍，目前为止需要指出的就是．Windows平台下的IE浏览器并不能显示其透明度信息’，因此，我们就要想办法在IE中隐藏该徽章。最简单的实现方法是使用IE同样不支持的子孙选择器( child selector)2，这样即可有选择性地只将该徽章呈现在能够正常显示其透明度信息的浏览器中。
html>body #extraDiv4 span{
background: transparent url (seal.png) top right no-repeat;
)

    但显然，对于那些更为正式的Web项目来说，即使是那些非“必不可少”的图像也必须同样显示于IE中，以保证站点的严肃和统一。虽然GIF格式中简单的“开／关”透明度设置，会带来不少限制，但如果仔细规划的话，仍旧有办法实现所需的功能。禅意花园鼓励这种实验性质的超前尝试，但你的客户或许并不能如此“通情达理”。

    2.6.7 迈出小小的一步

    在规定期限内，仅仅从设计图开始，直至编写出完全基于CSS布局的Web页面的确是个不小的挑战。成功的关键在于将其合理地分割成一些较小的任务——例如，对于Night Drive的页首部分布局，我们就将其分为了两个步骤进行。
    事先多考虑几种可能，将使您在问题到来时更加沉着冷静，并做出最正确的决定。对于任何问题，例如改变页面中元素的位置、调整元素的外边距或是为元素添加某种特效等，这一条都是颠扑不破的真理。