Czy jest możliwe, używając tylko CSS, aby tło
elementu było półprzezroczyste, ale zawartość (tekst & obrazy) elementu była nieprzezroczysta?
Chciałbym to osiągnąć bez konieczności posiadania tekstu i tła jako dwóch oddzielnych elementów.
Kiedy próbuję:
<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;
}
Wygląda na to, że elementy dziecięce podlegają nieprzezroczystości swoich rodziców, więc opacity:1
jest względne do opacity:0.6
rodzica.
Najprostszą metodą jest użycie półprzezroczystego tła obrazu PNG.
Możesz użyć JavaScript, aby to zadziałało w Internet Explorer 6, jeśli potrzebujesz.
Ja używam metody opisanej w Transparent PNGs in Internet Explorer 6.
Poza tym, możesz to podrobić używając dwóch elementów rodzeństwa obok siebie - zrób jeden półprzezroczysty, a następnie absolutnie umieść drugi nad nim.
Problem polega na tym, że tekst w rzeczywistości ma pełne krycie w twoim przykładzie. Ma on pełne krycie wewnątrz znacznika p
, ale znacznik p
jest tylko półprzezroczysty.
Mógłbyś dodać półprzezroczysty obraz tła PNG zamiast realizować go w CSS, lub rozdzielić tekst i div na dwa elementy i przesunąć tekst nad pole (na przykład, ujemny margines).
W przeciwnym razie nie będzie to możliwe.
Tak jak wspomniał Chris: jeśli używasz pliku PNG z przezroczystością, musisz użyć obejścia JavaScript, aby zadziałał on w upierdliwym Internet Explorerze...
Opacity of background, but not the text ma kilka pomysłów. Albo użyj półprzezroczystego obrazu, albo nałóż dodatkowy element.