用CSS背景屬性代替圖片SRC
發(fā)布時間：2012-12-25 15:08:53 作者：佚名 
我要評論
我要評論記得當(dāng)時我剛買計算機, 上網(wǎng)下載圖片總是下載到一個透明的 GIF 圖片, 百思不得其解, 所以研究了一番. 后來發(fā)現(xiàn)網(wǎng)站上的圖片都是通過背景的方式顯示出來的,接下來介紹如何用CSS背景屬性代替圖片SRC，需要了解的朋友可以參考下
不久之前, 我介紹了一個使用WordPress 原生縮略圖的小技巧, 關(guān)于如何使用 WordPress 上傳圖片生成的縮略圖作為文章列表中的預(yù)覽圖, 并且留下了兩個問題給同學(xué)們思考, 第一個問題是:
如果圖片高度或者寬度不足 150px, 這樣做必然將圖片拉伸, 很不美觀. 用什么辦法可以讓圖片都顯示為 150x150, 并居中顯示? 可以用 CSS 實現(xiàn)...
跟帖中有同學(xué)給出了一些解決辦法, 都說得很好, 但是我還是想說說自己常用的處理辦法. 我這也不是什么高明的辦法, 5 年前就有人在用, 但它方便快捷.
原理很簡單, follow me.
給 IMG 元素一個透明圖片. 可以選用 GIF 圖片, 因為文件頭比較小, 圖片 1px*1px 就可以了. (真扣!)
設(shè)定圖片的寬和高. width="150" height="150"
然后通過 style 屬性的 background 將需要顯示的圖片地址作為背景顯示在 IMG 元素上.
圖片的 background-position 設(shè)為 50% 50%.
Okay, 我們已經(jīng)得到一個不拉伸的, 垂直和水平居中的縮略圖. 例子看下面.
<img src="{某透明圖片的 URL}" alt="腳本之家" style="background:url(http://chabaoo.cn/images/logo.gif) no-repeat 50% 50%;width:150px;height:150px;" />
另外, 比較常用的方法還有用 JavaScript 在 DOM ready 的時候?qū)D片載入, 并通過計算圖片和外框的大小為圖片加上 margin 令圖片居中. 這樣可以讓 document 優(yōu)先加載, 保證頁面顯示速度, 但是, 一旦圖片數(shù)量比較多, IE 可能會卡.
好了, 技術(shù)說完了八卦一下. 5 年前發(fā)生了什么? 記得當(dāng)時我剛買計算機, 上網(wǎng)下載圖片總是下載到一個透明的 GIF 圖片, 百思不得其解, 所以研究了一番 (當(dāng)年的小白很杯具). 后來發(fā)現(xiàn)網(wǎng)站上的圖片都是通過背景的方式顯示出來的. 雖然網(wǎng)站要防止用戶在網(wǎng)頁上下載圖片幾乎是不可能的, 但是這個簡單的方法起碼可以做到兩點.
保證另存網(wǎng)頁的時候不會下載頁面上的圖片.
粗心的用戶下載了大量圖片后才發(fā)現(xiàn)下載下載的全部是透明圖片.
如果圖片高度或者寬度不足 150px, 這樣做必然將圖片拉伸, 很不美觀. 用什么辦法可以讓圖片都顯示為 150x150, 并居中顯示? 可以用 CSS 實現(xiàn)...
跟帖中有同學(xué)給出了一些解決辦法, 都說得很好, 但是我還是想說說自己常用的處理辦法. 我這也不是什么高明的辦法, 5 年前就有人在用, 但它方便快捷.
原理很簡單, follow me.
給 IMG 元素一個透明圖片. 可以選用 GIF 圖片, 因為文件頭比較小, 圖片 1px*1px 就可以了. (真扣!)
設(shè)定圖片的寬和高. width="150" height="150"
然后通過 style 屬性的 background 將需要顯示的圖片地址作為背景顯示在 IMG 元素上.
圖片的 background-position 設(shè)為 50% 50%.
Okay, 我們已經(jīng)得到一個不拉伸的, 垂直和水平居中的縮略圖. 例子看下面.
復(fù)制代碼
代碼如下:<img src="{某透明圖片的 URL}" alt="腳本之家" style="background:url(http://chabaoo.cn/images/logo.gif) no-repeat 50% 50%;width:150px;height:150px;" />
另外, 比較常用的方法還有用 JavaScript 在 DOM ready 的時候?qū)D片載入, 并通過計算圖片和外框的大小為圖片加上 margin 令圖片居中. 這樣可以讓 document 優(yōu)先加載, 保證頁面顯示速度, 但是, 一旦圖片數(shù)量比較多, IE 可能會卡.
好了, 技術(shù)說完了八卦一下. 5 年前發(fā)生了什么? 記得當(dāng)時我剛買計算機, 上網(wǎng)下載圖片總是下載到一個透明的 GIF 圖片, 百思不得其解, 所以研究了一番 (當(dāng)年的小白很杯具). 后來發(fā)現(xiàn)網(wǎng)站上的圖片都是通過背景的方式顯示出來的. 雖然網(wǎng)站要防止用戶在網(wǎng)頁上下載圖片幾乎是不可能的, 但是這個簡單的方法起碼可以做到兩點.
保證另存網(wǎng)頁的時候不會下載頁面上的圖片.
粗心的用戶下載了大量圖片后才發(fā)現(xiàn)下載下載的全部是透明圖片.
相關(guān)文章
- 可在background屬性中設(shè)置所有的背景屬性，下面為大家詳細(xì)介紹下各個屬性的含義，初學(xué)者可以參考下，希望對大家學(xué)習(xí)css有所幫助2013-08-12
- 背景屬性是給網(wǎng)頁添加背景色或者背景圖所用的CSS樣式，它的能力遠(yuǎn)遠(yuǎn)超于html之上。2011-01-05
- 背景(background)在項目中經(jīng)常會使用。這篇文章主要講解的是實際項目中的5個實例。通過具體的分析來達(dá)到學(xué)習(xí)的目的。2009-09-14
純css實現(xiàn)元素下出現(xiàn)橫線動畫（background-image）
這篇文章主要介紹了純css實現(xiàn)元素下出現(xiàn)橫線動畫（background-image）的相關(guān)資料,需要的朋友可以參考下2018-12-06
CSS3基于背景裁剪（background-clip）實現(xiàn)的文本標(biāo)題透視特效源碼
這是一款CSS3基于背景裁剪（background-clip）實現(xiàn)的文本標(biāo)題透視特效源碼。畫面上的外星球與飛船背景中央呈現(xiàn)出帶有背景剪切透視的文本視覺效果。同時可響應(yīng)鼠標(biāo)的移動呈2017-11-17
css3實現(xiàn)一個div設(shè)置多張背景圖片及background-image屬性實例演示
這篇文章主要介紹了css3實現(xiàn)一個div設(shè)置多張背景圖片及background-image屬性,同時對于css3背景漸變也做了詳細(xì)的解釋,水平漸變,左上角漸變等等方式,需要的朋友可以參考下2017-08-10- 固定背景圖片的通常方法就是把background-attachment設(shè)成fix,進一步的話自然則是用background-position,下面來詳解使用CSS固定頁面背景圖片及位置的方法:2016-05-17
- 這篇文章主要介紹了使用CSS3來實現(xiàn)滾動視差效果的教程,主要使用到了background-attachment屬性,需要的朋友可以參考下2015-08-24
- 這篇文章主要介紹了CSS3屬性background-size使用指南,需要的朋友可以參考下2014-12-09
這篇文章主要介紹了CSS中的背景屬性background的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-30
