Autor Zpráva
Brko
Profil *
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
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 *
Keeehi:
Ok, tak to mám teď. Doufám, že to je ta správná cesta.
Knight
Profil
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 *
Knight:
To by mělo fungovat i v té IE6.
Nefunguje správně, v IE6 má pozadí jen jeden řádek textu.
Knight
Profil
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>

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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