用CSS背景屬性代替圖片SRC

2024-07-11 08:29:13

字體：大中小

來源：轉載

供稿：網友

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

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

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

復制代碼

代碼如下:
<img src="{某透明圖片的 URL}" alt="錯新站長站" style="background:url(http://www.survivalescaperooms.com/images/logo.gif) no-repeat 50% 50%;width:150px;height:150px;" />

另外, 比較常用的方法還有用 JavaScript 在 DOM ready 的時候將圖片載入, 并通過計算圖片和外框的大小為圖片加上 margin 令圖片居中. 這樣可以讓 document 優先加載, 保證頁面顯示速度, 但是, 一旦圖片數量比較多, IE 可能會卡.

好了, 技術說完了八卦一下. 5 年前發生了什么? 記得當時我剛買計算機, 上網下載圖片總是下載到一個透明的 GIF 圖片, 百思不得其解, 所以研究了一番 (當年的小白很杯具). 后來發現網站上的圖片都是通過背景的方式顯示出來的. 雖然網站要防止用戶在網頁上下載圖片幾乎是不可能的, 但是這個簡單的方法起碼可以做到兩點.
保證另存網頁的時候不會下載頁面上的圖片.

粗心的用戶下載了大量圖片后才發現下載下載的全部是透明圖片.

上一篇：Firebug 調試器Web開發者應掌握12個初級使用技巧

下一篇：position:sticky用法介紹及瀏覽器兼容性