Kas on võimalik, kasutades ainult CSS-i, muuta elemendi "taust" pooleldi läbipaistevaks, kuid selle sisu (tekst & pildid) on läbipaistmatu?
Tahaksin seda saavutada ilma, et tekst ja taust oleksid kaks eraldi elementi.
Kui proovin:
<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;
}
Paistab, et lapselemendid alluvad oma vanemate läbipaistmatusele, seega opacity:1
on suhteline vanema opacity:0.6
suhtes.
Kõige lihtsam meetod oleks kasutada pooleldi läbipaistvat PNG-kuju.
Vajaduse korral võite kasutada JavaScripti, et see Internet Explorer 6 töötaks.
Ma kasutan meetodit, mis on kirjeldatud Läbipaistvad PNG-d Internet Explorer 6-s.
Muidu võid seda võltsida, kasutades kahe kõrvuti asetsevat õde-õde elementi - tee üks pooleldi läbipaistev, seejärel paiguta teine ülevalt alla.
Probleem on selles, et teie näites on tekst tegelikult täielikult läbipaistmatu. See on täielikult läbipaistmatu p
sildi sees, kuid p
sild on lihtsalt poolläbipaistev.
Sa võid lisada CSS-i realiseerimise asemel poolläbipaistva PNG-foonipildi või eraldada teksti ja div-i kaheks elemendiks ja liigutada teksti üle kasti (näiteks negatiivne marginaal).
Vastasel juhul ei'tse see võimalik.
Nagu Chris mainis: kui kasutad läbipaistvusega PNG-faili, pead kasutama JavaScript'i ümberlülitust, et see tüütus Internet Exploreris toimiks...
Tausta, kuid mitte teksti läbipaistmatus on mõned ideed. Kas kasutage kas poolläbipaistvat pilti või lisage sellele täiendav element.