{"id":280,"date":"2013-01-03T13:42:11","date_gmt":"2013-01-03T11:42:11","guid":{"rendered":"http:\/\/webowiec.net\/blog\/?p=280"},"modified":"2013-02-21T13:25:28","modified_gmt":"2013-02-21T11:25:28","slug":"css-przezroczyste-tlo","status":"publish","type":"post","link":"https:\/\/webowiec.net\/blog\/css-przezroczyste-tlo\/","title":{"rendered":"[css] prze\u017aroczyste t\u0142o"},"content":{"rendered":"

Jak otrzyma\u0107 efekt prze\u017aroczystego lub cz\u0119\u015bciowo prze\u017aroczystego t\u0142a na stronie www, kt\u00f3re b\u0119dzie dzia\u0142a\u0107 w ka\u017cdej przegl\u0105darce i w ka\u017cdym systemie operacyjnym?<\/p>\n

Na pocz\u0105tek warto przygl\u0105dn\u0105\u0107 si\u0119 rozwi\u0105zaniu tego problemu z u\u017cyciem CSS3, kt\u00f3ry jest obs\u0142ugiwany przez coraz wi\u0119ksz\u0105 ilo\u015b\u0107 przegl\u0105darek i powoli staje si\u0119 dobr\u0105 alternatyw\u0105 dla wszystkich “obej\u015b\u0107” , “how-to” i wszelkich modyfikacjach pod konkretne przegl\u0105darki.<\/p>\n

Aby otrzyma\u0107 efekt prze\u017aroczystego t\u0142a (i tylko t\u0142a, bez tekstu ani \u017cadnego innego elementu wewn\u0105trz), wystarczy po prostu zamieni\u0107 palet\u0119 barw ze zwyk\u0142ego RGB (domy\u015blny) na RGBA (RGB + Alpha) nast\u0119puj\u0105cym kodem:
\n[sourcecode language=”css”]
\nbackground-color: rgba(255,0,0,0.5);
\n[\/sourcecode]<\/p>\n

Niestety jak to na proste rozwi\u0105zanie przypad\u0142o – nie dzia\u0142a wsz\u0119dzie \ud83d\ude09<\/p>\n

Jest jednak prosty i sprawdzony (a przede wszystkim uniwersalny) spos\u00f3b na uzyskanie efektu prze\u017aroczystego t\u0142a na stronie www:<\/p>\n

Wystarczy zastosowa\u0107 t\u0142o obrazkowe, sk\u0142adaj\u0105ce si\u0119 z wielu pikselowej wielko\u015bci przezroczystych grafik.
\nDodaj\u0105c do tego zapis grafiki w postaci kodu base64<\/strong> otrzymujemy liniowy kod na prze\u017aroczyste t\u0142o.<\/p>\n

Przyk\u0142ad dla prze\u017aroczysto\u015bci 50% koloru czarnego:<\/div>\n

<\/p>\n

Kod : mo\u017cna wymieni\u0107 na dowolny z poni\u017cszej listy (lub na dowolny inny otrzymany poprzez zakodowanie grafiki do poziomu kodu base64):<\/p>\n

Czarny 10%: <\/p>\n

Czarny 20%: <\/p>\n

Czarny 30%: <\/p>\n

Czarny 40%: <\/p>\n

Czarny 50%: <\/p>\n

Czarny 60%: <\/p>\n

Czarny 70%:<\/p>\n

Czarny 80%: <\/p>\n

Czarny 90%: <\/p>\n

Bia\u0142y 10%: <\/p>\n

Bia\u0142y 20%: <\/p>\n

Bia\u0142y 30%: <\/p>\n

Bia\u0142y 40%: <\/p>\n

Bia\u0142y 50%: <\/p>\n

Bia\u0142y 60%: <\/p>\n

Bia\u0142y 70%: <\/p>\n

Bia\u0142y 80%: <\/p>\n

Bia\u0142y 90%: <\/p>\n","protected":false},"excerpt":{"rendered":"

Jak otrzyma\u0107 efekt prze\u017aroczystego lub cz\u0119\u015bciowo prze\u017aroczystego t\u0142a na stronie www, kt\u00f3re b\u0119dzie dzia\u0142a\u0107 w ka\u017cdej przegl\u0105darce i w ka\u017cdym systemie operacyjnym? Na pocz\u0105tek warto przygl\u0105dn\u0105\u0107 si\u0119 rozwi\u0105zaniu tego problemu z u\u017cyciem CSS3, kt\u00f3ry jest obs\u0142ugiwany przez coraz wi\u0119ksz\u0105 ilo\u015b\u0107 … <\/i> Czytaj ca\u0142o\u015b\u0107<\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,3,24,6],"tags":[498,497,507,510,153,174,175,501,172,504,11,16,509,500,503,17,508,505,512,502,506,55,56,10,53,499,511,9,8,7],"class_list":["post-280","post","type-post","status-publish","format-standard","hentry","category-poradniki","category-porady-dla-webmasterow","category-technologieinformatyka","category-tourtale","tag-background","tag-base64","tag-base64-image","tag-base64-prezroczystych-png","tag-css","tag-css-bez-logowania","tag-css-bez-rejestracji","tag-css-przezroczyste-tlo","tag-css-za-darmo","tag-jak-zrobic-przezroczyste-tlo","tag-jak-zrobic-strone-www","tag-jak-zrobic-swoja-strone-www","tag-kody-base64-png","tag-kolor-tla-css","tag-pol-przezroczyste-tlo-na-stronie","tag-porady-dla-webmasterow-2","tag-przezroczyste-png","tag-przezroczyste-tlo-bez-testu","tag-przezroczyste-tlo-w-odcieniach-szarosci-css","tag-przezroczyste-tlo-www","tag-przezroczystosc-css","tag-robienie-www","tag-strona-internetowa","tag-strony-internetowe","tag-strony-www","tag-tlo","tag-tlo-odcien-szarosci","tag-tworzenie-stron-www","tag-webmaster","tag-webowiec"],"_links":{"self":[{"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/posts\/280","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/comments?post=280"}],"version-history":[{"count":14,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/posts\/280\/revisions"}],"predecessor-version":[{"id":321,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/posts\/280\/revisions\/321"}],"wp:attachment":[{"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/media?parent=280"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/categories?post=280"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/tags?post=280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}