Archive for April, 2007

Trip Plan of 2007

Suggest view in Firefox.

The using of Google My Maps KML in Google Map displays not so good in IE, without the line and bad drag.

[ View big map on Google ]

3 Comments »

How to use CSS to insert png file in html

在制作页面时,经常会遇到渐变色背景上需要放透明图片的问题,若是采用gif格式的透明图片,图片周围会在不同色块区域出现难看的锯齿。以往比较死板的做法就是将渐变色背景上的图片做成JPG格式,将渐变色也一起做到图片中,但是这样若是改变背景颜色的话,就面临着需要重新制作图片的问题。

采用CSS方式嵌入PNG图片,原先一直都是用于页面背景图片,不过现在我们可以用下面的方式直接将png图片放到html中。

首先,html代码中加入如下代码:

<div id=”test-alpha”><span style=”filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’test.png’)”><img src=”test.png” /></span>

其中<span>部分的样式是为了在IE下能够正常显示png格式的图片,不过,仅仅只是这样还是不行的。因为,在IE下,由于<span>中的<img>是一张png图片,因此会遮挡住span里的样式。

所以,我们还需要在CSS代码中加入下面几行

##test-alpha span{ display:inline-block}

##test-alpha span img{ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);display:block; }

这样可以使得IE下<img>中的PNG图片保持全透明状态,从而可以看到<span>样式中的png图片。

为什么不把png文件写到CSS中去呢?这样做的目的在于,我们可以直接在html页面中编辑替换所需要的png文件。

No Comments »

 

Zokii Blog

my flickr

my del.icio.us

view more links on del.icio.us

friends' links