利用CSS样式加载图像的做法(CSS应用技巧)

 

很高兴告诉显示一张图片我可以这样做：

<td style="background-image: url('file:///D:/chenhu2/chznwb26.bmp');background-position-y: top;" ><td/>

 

这里我们讨论与研究一个使用 HTML 控件与利用 CSS 来显示一张图片的区别：

<img style="background-image: url('file:///D:/chenhu2/chznwb26.bmp');background-position-y: top;" />

 

先看例子：

（ 1 ）

<img style="background-image: url('file:///D:/chenhu2/chznwb26.bmp');background-position-y: top;" />

（ 2 ）

<img src= "file:///D:/chenhu2/chznwb26.bmp" />

 

在显示图片的两种方法中很显然大家会发现一个问题是：

 

方法 2 比方法 1 多了一个能力是：默认显示为图片大子，即可以自动匹配。

 

利用方法 1 如何实现该 Html 控件的这个特征呢：

我的思路是这样，利用 IO 类来获取图像对象，再取得属性长与宽，再赋予 style 就可以了。

 

最后大家可能会发现一个问题： <img style="background-image: url('file:///D:/chenhu2/chznwb26.bmp');background-position-y: top;" /> 图像表面出现一个交叉的显示，这里我是使用一个透明色的图像加入以解决这个问题：即 <img src = " 透明的 .gif" style="background-image: url('file:///D:/chenhu2/chznwb26.bmp');background-position-y: top;" />

 

懂得这个显示图像的方法我们就可以在 CSS 样式表更方便配置我们想要的图像了。

 

至于是否有其它更好一些的方法，请有此经验的朋友分享一下。