CSS przezroczyste tło obrazu za pomocą „danych:”

Widziałem na niektórych stronach, które można dołączyć obrazy w CSS za pomocą słowa kluczowego „dane”:CSS przezroczyste tło obrazu za pomocą „danych:”

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

kod dziwnie wygląda jak ciąg base64 ecoded :

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

wyglądają całkiem fajnie: D

Zastanawiałem się, jak mogę to przezroczysty piksel 1x1 GIF takiego? Czy ktokolwiek zna kod danych takiego obrazu?

Czy to dobry pomysł na małe i bardzo popularne obrazy? Czy wszystkie przeglądarki obsługują to?

Źródło

2011-04-07 Alex

Jeśli nie ma czegoś, czego nie jestem świadomy, nie ma powodu, aby używać glifu spacerowego jako obrazu tła CSS. –

Witaj Ben. Próbuję uniemożliwić wybór numerów linii: http://jsfiddle.net/rVwqR/ – Alex

Po prostu uniemożliwiam wybór w ten sposób poprzez CSS; nie potrzeba obrazu tła: http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting/4407335#4407335 –

To się nazywa The data URI scheme

Użyj danych URI Kitchen przekonwertować czegokolwiek do danych URI. Link: http://software.hixie.ch/utilities/cgi/data/data

Źródło

2011-04-07 21:47:38 Shaz

Próbowałem przekonwertować obraz i otrzymałem pustą stronę – Alex

@Alex: Tak, to dlatego, że obraz jest przezroczysty, nie? Tak czy inaczej, po przekonwertowaniu skopiuj adres URL na pasku adresu. Powinien zaczynać się od 'danych'. – Shaz

ah Widzę teraz, ale wygenerowany kod jest ogromny: http: // jsfiddle.net/rSzfd /: x – Alex

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

Nic złego w ten sposób można zaoszczędzić HTTP obie strony. Jedynym minusem jest to, że nie działa w starszych wersjach IE (IE8, wierzę, zaczął go wspierać)

Źródło

2011-04-07 21:48:30

pokazuje białe tło. jak mogę uczynić go przejrzystym? – Alex

Przepraszam, zaktualizowałem to. –

dzięki, to działa. – dsomnus

to przezroczysty GIF jednego piksela

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

Źródło

2012-05-18 05:21:39 rushkeldon

Up-to-date szczegóły przeglądarki obsługiwane przez URI danych:

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

Źródło

2013-09-26 11:04:03 callum

zależności od przeglądarek, które trzeba wspierać może być lepiej wyłączyć za pomocą rgba(). Wiem, że to pytanie jest trochę stare.

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

Źródło

2013-09-26 11:13:50

CSS przezroczyste tło obrazu za pomocą „danych:”

Odpowiedz

Powiązane problemy