Je možné pouze pomocí CSS vytvořit poloprůhledné pozadí
prvku, ale obsah (text & obrázky) prvku je neprůhledný?
Rád bych toho dosáhl, aniž by text a pozadí byly dva samostatné prvky.
Při pokusu:
<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;
}
Vypadá to, že podřízené prvky podléhají neprůhlednosti svých rodičů, takže opacity:1
je relativní vůči opacity:0.6
rodiče.
Nejjednodušší metodou je použít poloprůhledný obrázek PNG na pozadí.
V případě potřeby můžete použít JavaScript, aby to fungovalo i v Internet Exploreru 6.
Já používám metodu popsanou v článku Transparent PNGs in Internet Explorer 6.
Jinak to můžete předstírat pomocí dvou vedle sebe umístěných sourozeneckých prvků - jeden udělejte poloprůhledný a druhý absolutně umístěte nad něj.
Problém je v tom, že ve vašem příkladu je text ve skutečnosti plně neprůhledný. Uvnitř tagu p
je plně neprůhledný, ale tag p
je jen poloprůhledný.
Místo realizace v CSS byste mohli přidat poloprůhledný obrázek PNG na pozadí nebo oddělit text a div do dvou prvků a text přesunout přes box (například záporný okraj).
V opačném případě to nebude'možné.
Přesně jak zmínil Chris: pokud použijete soubor PNG s průhledností, musíte použít obchvat v JavaScriptu, aby to v otravném Internet Exploreru fungovalo...
Neprůhlednost pozadí, ale ne textu má několik nápadů. Buď použijte poloprůhledný obrázek, nebo překryjte další prvek.