Autor Zpráva
Richard
Profil *
Ahoj, mám průhledný blok s opacity 0.4 a v něm text. Chci, aby na ten text se nevztahovala průhlednost, jde to nějak udělat? Zkoušel jsem tohle, ale nepomohlo to. Díky za rady.

<div id="myStatement" style="border: 1px solid gray;
                                                border-radius: 6px;
                                                width: 600px;
                                                text-align: left;
                                                Line-height: 100%;
                                                padding: 6px;
                                                position: relative; top: -160px; left: -110px;
                                                background-color: black;
                                                opacity: 0.4;">
   <div style="width: 100%; 
                      color: white; 
                      font-size: 25px; 
                      font-family: Georgia; 
                      opacity: 1;" >  
   Add your company and share data and events </div>  
</div>



Na konci chybí div, ten tam samozřejmě mám.
Chamurappi
Profil
Reaguji na Richarda:
mám průhledný blok s opacity 0.4 a v něm text
Nechceš mít průhledný blok, ale průhledné pozadí. Můžeš použít na background-color barvu zapsanou jako rgba, má mezi prohlížeči podobně špatnou podporu jako opacity.
Nebo kompatibilnější možnost — dát na pozadí průsvitné PNG, třeba takhle:
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQIHWNgSAMAAGkAZ9QfhWEAAAAASUVORK5CYII=')
Richard
Profil *
Zkoušel jsem opacity na IE, Chromu, Opere a Mozile a vypadá to, že kompatibilita tam je. Co se týče pozadí, tak pozadí průhledné mám. to nechci měnit, jen vyřešit tu drobnost, jak udělat neprůhledný text v průhledném bloku. Myslím si, že bych to nechtěl moc komplikovat průsvitným png.
Chamurappi
Profil
Reaguji na Richarda:
Nezkoušel jsi všechny verze, které se používají.

Co se týče pozadí, tak pozadí průhledné mám.
Máš průhledný celý blok.

jen vyřešit tu drobnost, jak udělat neprůhledný text v průhledném bloku
Není to drobnost. Nastavíš-li bloku opacity, je průhledné všechno v něm. Takže buď budeš mít text mimo průhledný blok, nebo použiješ jen průhledné pozadí.

Myslím si, že bych to nechtěl moc komplikovat průsvitným png.
Proč? Krása kódu je pro tvé návštěvníky důležitější, než aby jim stránka správně fungovala? Stačí skutečně jen ten řádek, co jsem uvedl.
Richard
Profil *
Tak jasně, to máš pravdu, pro uživatele všechno. Můžeš mi trochu rozebrat ten, moc mu nerozumím.
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQIHWNgSAMAAGkAZ9QfhWEAAAAASUVORK5CYII=')

kde tam vložím obr a kde nastavím průhlednost?
Chamurappi
Profil
Reaguji na Richarda:
Tohle už je přímo ten PNG obrázek. Jednopixelové PNG s průsvitnou černou, dobře zkomprimované a převedené do formy adresy, binární data jsou přeložená do base64. Místo data:blabla… by mohla být adresa obrázku uloženého na serveru, tento způsob ušetří HTTP požadavek.
Nastavit mu dodatečně jinou průsvitnost je trochu pracnější, muselo by se to PNG upravit v grafickém editoru a zase převést. Jestli potřebuješ průsvitnost častěji měnit, doporučuji mít obrázek normálně externě, ne v data-adrese.
Richard
Profil *
díky moc
Bubák
Profil
Mi se více líbí pozadí absolutním pozicováním. Je to sice element navíc v HTML kódu, ale v CSS kódu můžu změnit barvu i průsvitnost, aniž bych spouštěl grafický editor a převáděl obrázek na data base64.
http://jecas.cz/opacity#posicovani

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: