CSS kullanarak bir metne veya görüntüye nasıl saydam arka plan verebilirim?

Yalnızca CSS kullanarak, bir öğenin arka planını yarı saydam yapmak, ancak öğenin içeriğini (metin ve resimler) opak yapmak mümkün müdür?

Bunu, metin ve arka planı iki ayrı öğe olarak kullanmadan gerçekleştirmek istiyorum.

Denerken:

<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;
}

Görünüşe göre alt öğeler ebeveynlerinin opaklığına tabi tutuluyor, bu nedenle opacity:1 ebeveynin opacity:0.6 değerine göreli.

Paul D. Waite
Edited question 2016ösp9ös12 Nisan 2016 в 12:09
Programlama
html css opacity
2009ööp0öö9 Nisan 2009 в 9:00
43 görünümler

En kolay yöntem, yarı saydam bir arka plan PNG görüntüsü kullanmak olacaktır.

Gerekirse Internet Explorer 6'da çalışmasını sağlamak için JavaScript kullanabilirsiniz.

Ben Internet Explorer 6'da Şeffaf PNG'ler bölümünde özetlenen yöntemi kullanıyorum.

Bunun dışında, yan yana iki kardeş öğe kullanarak bunu taklit edebilirsiniz - birini yarı saydam yapın, ardından diğerini kesinlikle üstte konumlandırın.

Peter Mortensen
Edited answer 2019ösp24ös14 Eylül 2019 в 2:24
Yorumlar (2)

Sorun şu ki, örneğinizde metin aslında tam opaklığa sahip. petiketi içinde tam opaklığa sahiptir, ancakp` etiketi sadece yarı saydamdır.

CSS'de gerçekleştirmek yerine yarı saydam bir PNG arka plan görüntüsü ekleyebilir veya metin ve div'i iki öğeye ayırabilir ve metni kutunun üzerine taşıyabilirsiniz (örneğin, negatif kenar boşluğu).

Aksi takdirde bu mümkün olmayacaktır.

Tıpkı Chris'in bahsettiği gibi: şeffaf bir PNG dosyası kullanırsanız, sinir bozucu Internet Explorer'da çalışması için bir JavaScript geçici çözümü kullanmanız gerekir...

Peter Mortensen
Edited answer 2019ösp25ös14 Eylül 2019 в 2:25
Yorumlar (0)

Arka planın opaklığı, ancak metnin değil bazı fikirlere sahiptir. Ya yarı saydam bir görüntü kullanın ya da ek bir öğenin üzerine yerleştirin.

Community
Edited answer 2017ööp31öö10 Mayıs 2017 в 10:31
Yorumlar (0)