用 CSS 背景属性代替图片 SRC

秋子淡无痕

1. 给 IMG 元素一个透明图片. 可以选用 GIF 图片, 因为文件头比较小, 图片 1px*1px 就可以了. (真扣!)
2. 设定图片的宽和高. width="150" height="150"
3. 然后通过 style 属性的 background 将需要显示的图片地址作为背景显示在 IMG 元素上.
4. 图片的 background-position 设为 50% 50%.

Okay, 我们已经得到一个不拉伸的, 垂直和水平居中的缩略图. 例子看下面.

1. <img src="{某透明图片的 URL}" alt="Google 别走!" style="background:url(http://www.google.com/intl/en_ALL/images/logo.gif) no-repeat 50% 50%;width:150px;height:150px;" />

复制代码

原文：http://www.neoease.com/img-src-to-css-background/