CSS saydam arka plan görüntüsü

Sana bir "veri" anahtar kelimeyi kullanarak CSS görüntüleri dahil ettiğimizi bazı sitelerde gördüm:CSS saydam arka plan görüntüsü

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

garip kod gibi base64 ecoded ip gibi bir :

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

hoş serin bak: D

ben böyle bir saydam 1x1 piksel GIF içerebilir nasıl merak ediyorum? Böyle bir resmin veri kodunu bilen var mı?

Küçük ve çok yaygın görüntüler için bunu yapmak iyi bir fikir midir? Tüm tarayıcılar bunu destekliyor mu?

sadece veri uri giden tarihiyle şey hakkında dönüştürmek The data URI scheme

kullanın Veri URI Mutfak denir

kaynak

2011-04-07 Alex

Farkında olmadığım bir şey olmadıkça, bir CSS arka plan görüntüsü olarak bir spacer gif kullanmanın bir nedeni yoktur. –

Merhaba Ben. Satır numaralarını burada imkansız hale getirmeye çalışıyorum: http://jsfiddle.net/rVwqR/ – Alex

Sadece CSS ile seçimi engellemek; arka plan görüntüsü gerekli değil: http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting/4407335#4407335 –

. Bağlantı: Bunu yaparken yanlış http://software.hixie.ch/utilities/cgi/data/data

kaynak

2011-04-07 21:47:38 Shaz

Bir görüntüyü dönüştürmeyi denedim ve boş bir sayfa açtım – Alex

@Alex: Evet, çünkü görüntü saydam değil mi? Her iki durumda da, dönüştürdüğünüzde, URL'yi adres çubuğuna kopyalayın. 'Data' ile başlamalıdır. – Shaz

Şimdi görüyorum ama üretilen kod çok büyük: http: // jsfiddle.net/rSzfd /: x – Alex

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

Hiçbir şey, bir HTTP gidiş-dönüş kaydedin. Sadece olumsuz IE'nin eski sürümlerinde çalışmıyor olmasıdır

kaynak

2011-04-07 21:48:30

beyaz bir arka plan gösterir. bunu nasıl şeffaf yapabilirim? – Alex

Üzgünüm, güncelleyin. –

teşekkürler, bu işe yarıyor. – dsomnus

bu bir piksel

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

kaynak

2012-05-18 05:21:39 rushkeldon

Yukarı güncel bir saydam GIF (IE8, inanıyorum, bunu destekleyecek başladı) veri adresleri için tarayıcı desteği ayrıntıları:

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

kaynak

2013-09-26 11:04:03 callum

Eğer rgba() kullanarak daha iyi olabilir desteklemeniz gereken tarayıcılarda bağlı. Bu sorunun biraz yaşlı olduğunu biliyorum.

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

kaynak

2013-09-26 11:13:50

CSS saydam arka plan görüntüsü

cevap

İlgili konular