用 CSS 背景属性代替图片 SRC
不久之前, 我介绍了一个使用 WordPress 原生缩略图的小技巧, 关于如何使用 WordPress 上传图片生成的缩略图作为文章列表中的预览图, 并且留下了两个问题给同学们思考, 第一个问题是:
如果图片高度或者宽度不足 150px, 这样做必然将图片拉伸, 很不美观. 用什么办法可以让图片都显示为 150x150, 并居中显示? 可以用 CSS 实现...
跟帖中有同学给出了一些解决办法, 都说得很好, 但是我还是想说说自己常用的处理办法. 我这也不是什么高明的办法, 5 年前就有人在用, 但它方便快捷.
原理很简单, follow me.
1. 给 IMG 元素一个透明图片. 可以选用 GIF 图片, 因为文件头比较小, 图片 1px*1px 就可以了. (真扣!)
2. 设定图片的宽和高. width="150" height="150"
3. 然后通过 style 属性的 background 将需要显示的图片地址作为背景显示在 IMG 元素上.
4. 图片的 background-position 设为 50% 50%.
Okay, 我们已经得到一个不拉伸的, 垂直和水平居中的缩略图. 例子看下面.
<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;" />
另外, 比较常用的方法还有用 JavaScript 在 DOM ready 的时候将图片载入, 并通过计算图片和外框的大小为图片加上 margin 令图片居中. 这样可以让 document 优先加载, 保证页面显示速度, 但是, 一旦图片数量比较多, IE 可能会卡.
好了, 技术说完了八卦一下. 5 年前发生了什么? 记得当时我刚买计算机, 上网下载图片总是下载到一个透明的 GIF 图片, 百思不得其解, 所以研究了一番 (当年的小白很杯具). 后来发现网站上的图片都是通过背景的方式显示出来的. 虽然网站要防止用户在网页上下载图片几乎是不可能的, 但是这个简单的方法起码可以做到两点.
1. 保证另存网页的时候不会下载页面上的图片.
2. 粗心的用户下载了大量图片后才发现下载下载的全部是透明图片.
问题是背景图还是原图，没有跟着图片高度和宽度缩放，如果图片很大其他部分被隐藏了看起来很悲剧。
@QiQiBoY
我认为alt和title都加比较好。
@Calcifer
定位差异用hack还是蛮方便的
width:150px;height:150px; 好像应该写在CSS 外面吧
@园子 Nice!!
之前有用过这个方法，非常不错的说。
LZ的确在阿里了-_-+我们很近啊~~
在MG的Blog中总是可以学到东西
@Calcifer
定位差异用hack还是蛮方便的
不错的技巧,要多多学习才好.
@江流
发现你好像到哪都看不懂技术文 - -
哈哈下载透明图好玩啊x)
这个好
@园子 但是我不懂=。=
厉害厉害！佩服佩服！
@QiQiBoY
有时IE就是会因为div的一个pix问题而郁闷…… 诡异的事件很多……
@QiQiBoY
图片本来就是不抓取的，只不过用alt来进行描述比用title要好
@Calcifer
o？是吗，div有那么差吗？这个你只是在放日志的div中又放了个小盒子，难道还会产生很严重的兼容性吗？那你的代码结构写的也太差了点。。
@bolo
蜘蛛不抓图片，即使抓，你用img，每篇文章抓取到的也都是一样的透明图片，这个css搞得背景图片是无论也抓不到的。。。。。
结构上多套一个小盒子没什么影响吧。。
这对seo影响到什么了？
@QiQiBoY
用div不利于SEO
嘻嘻，师兄，我学习了~你的博客好多内容，看了好久好久~
以前搞博客，要用图片去替换关键字，遇到没有对应的图片时，也是用这个办法的。
@QiQiBoY
用盒子当然可以，问题是盒子的定位会跟他爸爸盒子相关，再说浏览器差异等等都是郁闷的事情……
小技巧达到大效果，不错不错……
那直接用div不也行吗，还省去了那个透明图片。。。。alt改为title。。。《div title="Google 别走!" style="background:url(http://www.google.com/intl/en_ALL/images/logo.gif) no-repeat 50% 50%;width:150px;height:150px;" 》《/div》
这种做法已经越来越流行了……
比较有趣~
5年前Firefox还不流行...5年后，CSS的背景图也被网友用Firefox存下来了~
这文章浅显易懂
哈哈
谢谢。
八卦一下，你现在在阿里了/?
原来有段秘辛。。。
高手！！！
好好学习一下！
沙發？學習ing~