| Autor | Zpráva | ||
|---|---|---|---|
| Richard Profil * |
#1 · Zasláno: 18. 9. 2014, 13:20:12 · Upravil/a: Richard
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 |
#2 · Zasláno: 18. 9. 2014, 13:25:51
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 * |
#3 · Zasláno: 18. 9. 2014, 13:37:39
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 |
#4 · Zasláno: 18. 9. 2014, 13:57:15
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 * |
#5 · Zasláno: 18. 9. 2014, 14:07:16
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 |
#6 · Zasláno: 18. 9. 2014, 15:06:31
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 * |
#7 · Zasláno: 18. 9. 2014, 15:50:44
díky moc
|
||
| Bubák Profil |
#8 · Zasláno: 18. 9. 2014, 22:51:58
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 |
||
|
Časová prodleva: 10 let
|
|||
0