CSS透明背景圖片

我看到一些網站上，你可以包括使用「數據」關鍵字CSS圖片：CSS透明背景圖片

.stuff { 
    background: transparent url(data:image/gif;base64,SOMEWEIRDCODEHERE) repeat center top; 
}

怪異的代碼看起來像一個base64 ecoded串：

R0lGODlhMwAxAIAAAAAAAP /// yH5BAAAAAAALAAAAAAzADEAAAK8jI + pBr0PowytzotTtbm/DTqQ6C3hGX ElcraA9jIr66ozVpM3nseUvYP1UEHF0FUUHkNJxhLZfEJNvol06tzwrgd LbXsFZYmSMPnHLB + zNJFbq15 + SOf50 + 6rG7lKOjwV1ibGdhHYRVYVJ9Wn k2HWtLdIW MSH9lfyODZoZTb4xdnpxQSEF9oyOWIqp6gaI9pI1Qo7BijbF ZkoaAtEeiiLeKn72xM7vMZofJy8zJys2UxsCT3kO229LH1tXAAAOw ==

看起來很酷：d

我想知道我怎麼可以包括透明的1x1像素的GIF這樣嗎？有誰知道這種圖像的數據代碼？

對於小而常見的圖像來說這是一個好主意嗎？所有瀏覽器都支持嗎？

來源

2011-04-07 Alex

除非有什麼我不知道，沒有理由使用spacer gif作爲CSS背景圖像。 – 2011-04-07 21:50:52

嗨，本。我試圖讓行號在這裏無法選擇：http://jsfiddle.net/rVwqR/ – Alex 2011-04-07 21:51:58

只是通過CSS阻止這樣的選擇;沒有背景圖片需要：http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting/4407335#4407335 – 2011-04-07 21:53:58

這就是所謂的The data URI scheme

使用數據URI廚房轉換幾乎任何數據的URI。鏈接： http://software.hixie.ch/utilities/cgi/data/data

來源

2011-04-07 21:47:38 Shaz

我試圖轉換一個圖像，我得到一個空白頁面 – Alex 2011-04-07 22:03:22

@Alex：是的，那是因爲圖像是透明的？無論哪種方式，一旦你轉換，複製地址欄中的網址。應該從'data'開始。 – Shaz 2011-04-07 22:04:37

啊我現在看到了，但生成的代碼很大：http：// jsfiddle。淨/ rSzfd /：X – Alex 2011-04-07 22:08:21

data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==

沒有錯，這樣做，可以節省一個HTTP往返。唯一的缺點是，它並沒有在舊版本的IE瀏覽器的工作（IE8，我相信，開始支持它）

來源

2011-04-07 21:48:30

它顯示白色背景。我怎樣才能讓它透明？ – Alex 2011-04-07 22:03:03

對不起，更新了它。 – 2011-04-07 22:19:07

謝謝，這工作。 – dsomnus 2014-01-30 17:47:31

這是一個像素

background-image: url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==);

來源

2012-05-18 05:21:39 rushkeldon

最多最新的透明GIF數據URI的瀏覽器支持的詳細信息：

http://caniuse.com/#feat=datauri

來源

2013-09-26 11:04:03 callum

取決於你需要支持，你可能會更好使用rgba()瀏覽器。我知道這個問題有點老。

body { 
    background-color: rgba(0, 0, 0, .5); 
}

來源

2013-09-26 11:13:50

CSS透明背景圖片

回答

相關問題