Is het mogelijk, alleen met CSS, om de achtergrond
van een element semi-transparant te maken, maar de inhoud (tekst & afbeeldingen) van het element ondoorzichtig te laten?
Ik zou dit graag willen bereiken zonder de tekst en de achtergrond als twee aparte elementen te hebben.
Bij het proberen:
<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;
}
Het lijkt erop dat kind-elementen onderworpen zijn aan de opacity van hun ouders, dus opacity:1
is relatief aan de opacity:0.6
van de ouder.
De gemakkelijkste methode zou zijn om een semi-transparante achtergrond PNG-afbeelding te gebruiken.
U kunt JavaScript gebruiken om het te laten werken in Internet Explorer 6 als dat nodig is.
Ik gebruik de methode die wordt beschreven in Transparante PNG's in Internet Explorer 6.
Je kunt het ook namaken met twee naast elkaar geplaatste sibling elements - maak één semi-transparant, en plaats dan de andere er absoluut overheen.
Het probleem is, dat de tekst eigenlijk volledige doorzichtigheid heeft in jouw voorbeeld. Het heeft volledige ondoorzichtigheid binnen de p
tag, maar de p
tag is slechts semi-transparant.
Je zou een semi-transparante PNG achtergrond afbeelding kunnen toevoegen in plaats van het te realiseren in CSS, of de tekst en div scheiden in twee elementen en de tekst over de box verplaatsen (bijvoorbeeld, negatieve marge).
Anders zal het'niet mogelijk zijn.
Net zoals Chris zei: als je een PNG bestand met transparantie gebruikt, moet je een JavaScript workaround gebruiken om het te laten werken in de vervelende Internet Explorer...
Ondoorzichtigheid van achtergrond, maar niet de tekst heeft wat ideeën. Gebruik een semi-transparante afbeelding, of overlap een extra element.