| Autor | Zpráva | ||
|---|---|---|---|
| Brko Profil * |
#1 · Zasláno: 30. 7. 2012, 17:03:15
Hledám nějaké řešení podobné tomuto: www.vertical.cz -> text je umístěný na poloprůhledných blocích a funguje jim to. Pokud klasicky nastavím základnímu div background: #fff; a průhlednost, zprůhlední se i text, resp. vše v daném divu.
Zde v diskusi jsem našel řadu zajímavých řešení, ale zajímalo by mně co je správně. Jelikož i IE9 zobrazuje dost věcí jinak než FF nebo Opera, tak nevím pro co se rozhodnout. Nemáte někdo nějaký zdroj na článek? Nejvíc se mně líbí asi poloprůhledný obrázek png, který se opakuje na pozadí, ale nevím zda-li je to správně. Např. IE 6 a starší neumí png zobrazit a zobrazuje místo toho totální hnus, na kterém bílý text není čitelný. Má cenu se tím zabývat? V eshopu asi jo. Z hlediska přístupnosti webu. Jedni tvrdí, že je to sice pěkné, ale zhoršuje to čitelnost webu. Co si o tom myslíte? Resp. co si o tom myslí statistiky? Máte nějaké zkušenosti. Plánujeme to nasadit na eshop. Díky za info. |
||
| Keeehi Profil |
#2 · Zasláno: 30. 7. 2012, 17:56:07
Osobně bych to viděl na poloprůhledný obrázek na pozadí. Pro IE 6 bych podmíněným komentářem přilinkoval css soubor, který by
background-image: url(pruhledny.png) nahradil obyčejným neprůhledným obrázkem, nebo to obrázkové pozadí celé odstranil a nastavil jen černé pozadí.
|
||
| Brko Profil * |
#3 · Zasláno: 30. 7. 2012, 18:51:23
Keeehi:
Ok, tak to mám teď. Doufám, že to je ta správná cesta. |
||
| Knight Profil |
#4 · Zasláno: 30. 7. 2012, 18:58:49
Ještě je možnost dát do pozadí absolutně pozicovaný div s černým pozadím a 50% průhledností. To by mělo fungovat i v té IE6.
<style type="text/css">
.content-container {
width: 900px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.content {
position: relative;/* aby fungoval z-index */
z-index: 1;
}
.content-background {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 0;
background-color: #000000;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.alpha(opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;
/* Good browsers */
opacity: 0.5;
}
</style>
<div class="content-container">
<div class="content">Obsah webu</div>
<div class="content-background"></div>
</div> |
||
| margin Profil * |
#5 · Zasláno: 30. 7. 2012, 21:01:34
Knight:
„To by mělo fungovat i v té IE6.“ Nefunguje správně, v IE6 má pozadí jen jeden řádek textu. |
||
| Knight Profil |
#6 · Zasláno: 31. 7. 2012, 10:43:06
margin:
Nemám to teď kde vyzkoušet, ale co by se stalo, kdybychom u toho .content-background místo šířky a výšky nastavili všechny 4 pozice? <style type="text/css">
.content-container {
width: 900px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.content {
position: relative;/* aby fungoval z-index */
z-index: 1;
}
.content-background {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 0;
background-color: #000000;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.alpha(opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;
/* Good browsers */
opacity: 0.5;
}
</style>
<div class="content-container">
<div class="content">Obsah webu</div>
<div class="content-background"></div>
</div> |
||
|
Časová prodleva: 12 let
|
|||
0