Je možné len pomocou CSS dosiahnuť, aby bolo pozadie
prvku polopriehľadné, ale obsah prvku (text & obrázky) nepriehľadný?
Chcel by som to dosiahnuť bez toho, aby text a pozadie boli dva samostatné prvky.
Pri pokuse:
<p>
<span>Hello world</span>
</p>
p {
position: absolute;
background-color: green;
filter: alpha(opacity=60);
opacity: 0.6;
}
span {
color: white;
filter: alpha(opacity=100);
opacity: 1;
}
Vyzerá to tak, že podriadené prvky podliehajú nepriehľadnosti svojich rodičov, takže priehľadnosť:1
je relatívna voči priehľadnosti:0,6
rodiča.
Najjednoduchšou metódou by bolo použiť polopriehľadný obrázok PNG na pozadí.
Ak potrebujete, môžete použiť JavaScript, aby to fungovalo v prehliadači Internet Explorer 6.
Ja používam metódu uvedenú v článku Transparentné PNG v prehliadači Internet Explorer 6.
Inak by ste to mohli predstierať pomocou dvoch vedľa seba umiestnených súrodeneckých prvkov - jeden z nich urobte polopriehľadným a druhý absolútne umiestnite nad neho.
Problém je v tom, že text vo vašom príklade je vlastne plne nepriehľadný. Vo vnútri tagu p
má plnú nepriehľadnosť, ale tag p
je len polopriehľadný.
Namiesto realizácie v CSS by ste mohli pridať polopriehľadný obrázok PNG na pozadí alebo rozdeliť text a div do dvoch prvkov a presunúť text nad box (napríklad záporný okraj).
Inak to nebude možné.
Presne ako spomenul Chris: ak použijete súbor PNG s priehľadnosťou, musíte použiť obchádzku pomocou JavaScriptu, aby to fungovalo v otravnom Internet Exploreri...
Nepriehľadnosť pozadia, ale nie textu má niekoľko nápadov. Buď použite polopriehľadný obrázok, alebo prekryte ďalší prvok.