用CSS背景屬性代替圖片SRC

發(fā)布時(shí)間：2012-12-25 15:08:53 作者：佚名

記得當(dāng)時(shí)我剛買計(jì)算機(jī), 上網(wǎng)下載圖片總是下載到一個(gè)透明的 GIF 圖片, 百思不得其解, 所以研究了一番. 后來(lái)發(fā)現(xiàn)網(wǎng)站上的圖片都是通過(guò)背景的方式顯示出來(lái)的,接下來(lái)介紹如何用CSS背景屬性代替圖片SRC，需要了解的朋友可以參考下

不久之前, 我介紹了一個(gè)使用WordPress 原生縮略圖的小技巧, 關(guān)于如何使用 WordPress 上傳圖片生成的縮略圖作為文章列表中的預(yù)覽圖, 并且留下了兩個(gè)問(wèn)題給同學(xué)們思考, 第一個(gè)問(wèn)題是:
如果圖片高度或者寬度不足 150px, 這樣做必然將圖片拉伸, 很不美觀. 用什么辦法可以讓圖片都顯示為 150x150, 并居中顯示? 可以用 CSS 實(shí)現(xiàn)...
跟帖中有同學(xué)給出了一些解決辦法, 都說(shuō)得很好, 但是我還是想說(shuō)說(shuō)自己常用的處理辦法. 我這也不是什么高明的辦法, 5 年前就有人在用, 但它方便快捷.

原理很簡(jiǎn)單, follow me.
給 IMG 元素一個(gè)透明圖片. 可以選用 GIF 圖片, 因?yàn)槲募^比較小, 圖片 1px*1px 就可以了. (真扣!)
設(shè)定圖片的寬和高. width="150" height="150"
然后通過(guò) style 屬性的 background 將需要顯示的圖片地址作為背景顯示在 IMG 元素上.
圖片的 background-position 設(shè)為 50% 50%.

Okay, 我們已經(jīng)得到一個(gè)不拉伸的, 垂直和水平居中的縮略圖. 例子看下面.

復(fù)制代碼

代碼如下:

另外, 比較常用的方法還有用 JavaScript 在 DOM ready 的時(shí)候?qū)D片載入, 并通過(guò)計(jì)算圖片和外框的大小為圖片加上 margin 令圖片居中. 這樣可以讓 document 優(yōu)先加載, 保證頁(yè)面顯示速度, 但是, 一旦圖片數(shù)量比較多, IE 可能會(huì)卡.

好了, 技術(shù)說(shuō)完了八卦一下. 5 年前發(fā)生了什么? 記得當(dāng)時(shí)我剛買計(jì)算機(jī), 上網(wǎng)下載圖片總是下載到一個(gè)透明的 GIF 圖片, 百思不得其解, 所以研究了一番 (當(dāng)年的小白很杯具). 后來(lái)發(fā)現(xiàn)網(wǎng)站上的圖片都是通過(guò)背景的方式顯示出來(lái)的. 雖然網(wǎng)站要防止用戶在網(wǎng)頁(yè)上下載圖片幾乎是不可能的, 但是這個(gè)簡(jiǎn)單的方法起碼可以做到兩點(diǎn).
保證另存網(wǎng)頁(yè)的時(shí)候不會(huì)下載頁(yè)面上的圖片.

粗心的用戶下載了大量圖片后才發(fā)現(xiàn)下載下載的全部是透明圖片.