Jak pomocí CSS vytvořím průhledné pozadí textu nebo obrázku?

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.

Paul D. Waite
Upravená otázka 18 duben 2016 в 12:09
Programování
html css opacity
30 duben 2009 в 9:00
34 zobrazení

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.

Peter Mortensen
Upravená odpověď 8 září 2019 в 2:24
Komentáře (2)

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...

Peter Mortensen
Upravená odpověď 8 září 2019 в 2:25
Komentáře (0)

Neprůhlednost pozadí, ale ne textu má několik nápadů. Buď použijte poloprůhledný obrázek, nebo překryjte další prvek.

Community
Upravená odpověď 23 květen 2017 в 10:31
Komentáře (0)