Ar įmanoma, naudojant tik CSS, padaryti elemento foną
pusiau permatomą, bet elemento turinį (tekstą ir paveikslėlius) padaryti nepermatomą?
Norėčiau to pasiekti neturėdamas teksto ir fono kaip dviejų atskirų elementų.
Bandant:
<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;
}
Atrodo, kad antriniams elementams taikoma jų tėvų neskaidrumo reikšmė, todėl nepermatomumas:1
yra santykinis su tėvų nepermatomumu:0,6
.
Paprasčiausia būtų naudoti pusiau permatomą foninį PNG paveikslėlį.
Jei reikia, galite naudoti "JavaScript", kad tai veiktų Internet Explorer 6.
Aš naudoju metodą, aprašytą Skaidrūs PNG vaizdai "Internet Explorer 6".
Be to, galite tai suklastoti naudodami dviejų greta esančių brolių ir seserų elementus - padarykite vieną pusiau permatomą, o kitą absoliučiai uždėkite ant viršaus.
Problema ta, kad jūsų pavyzdyje tekstas iš tikrųjų yra visiškai nepermatomas. Tekstas visiškai neskaidrus yra p
žymės viduje, tačiau p
žymė yra pusiau permatoma.
Vietoj to, kad tai įgyvendintumėte CSS, galite pridėti pusiau permatomą PNG fono paveikslėlį arba atskirti tekstą ir divą į du elementus ir perkelti tekstą per langelį (pvz., neigiama paraštė).
Kitaip tai nebus įmanoma.
Kaip ir minėjo Chrisas: jei naudojate PNG failą su permatomumu, turite naudoti "JavaScript" apėjimą, kad jis veiktų bjauriajame "Internet Explorer"...
Fono, bet ne teksto nepermatomumas turi keletą idėjų. Naudokite pusiau permatomą vaizdą arba uždėkite papildomą elementą.