Ali lahko lastnost opacity
pripišem samo lastnosti background
v div
in ne tudi besedilu v njem?
Poskusil sem:
background: #CCC;
opacity: 0.6;
vendar to ne spremeni motnosti.
Zdi se, da želite uporabiti prozorno ozadje, zato lahko poskusite uporabiti funkcijo rgba()
:
rgba(R, G, B, A)
R (rdeča), G (zelena) in B (modra) so lahko
<integer>
s ali<percentage>
s, pri čemer število 255 ustreza 100 %. A (alfa) je lahko<število>
med 0 in 1 ali<odstotek>
, pri čemer število 1 ustreza 100 % (popolna neprosojnost).
Primer RGBa
rgba(51, 170, 51, .1) / 10 % neprozorna zelena / rgba(51, 170, 51, .4) / 40 % neprozorna zelena / rgba(51, 170, 51, .7) / 70 % neprozorna zelena / rgba(51, 170, 51, 1) / popolnoma neprozorna zelena /
Majhen [primer][2], ki prikazuje, kako se lahko uporablja rgba
.
Od leta 2018 praktično **vsak brskalnik podpira sintakso rgba
.
To najlažje storite z dvema divoma, 1 z ozadjem in 1 z besedilom:
-- begin snippet: js hide: false -->
#container {
position: relative;
width: 300px;
height: 200px;
}
#block {
background: #CCC;
filter: alpha(opacity=60);
/* IE */
-moz-opacity: 0.6;
/* Mozilla */
opacity: 0.6;
/* CSS3 */
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div id="container">
<div id="block"></div>
<div id="text">Test</div>
</div>
Ne morete. Morate imeti ločen div, ki je samo to ozadje, tako da lahko prekrivnost uporabite samo zanj.
Pred kratkim sem to poskusil storiti in ker sem že uporabljal jQuery, sem ugotovil, da je najmanj težav povzročalo naslednje:
text
dajte enotno barvo ozadja, saj bo to privzeta barva brez JavaScript-a.text
in jo uporabite za div background
.Prepričan sem, da obstaja kakšen ninja način CSS, kako vse to narediti samo s floati ali kaj podobnega, vendar nisem imel potrpljenja, da bi to ugotovil.