Môžem priradiť vlastnosť opacity
len vlastnosti background
v div
a nie textu v ňom?
Skúsil som to:
background: #CCC;
opacity: 0.6;
ale to nezmení nepriehľadnosť.
Zdá sa, že chcete použiť priehľadné pozadie, v tom prípade môžete skúsiť použiť funkciu rgba()
:
rgba(R, G, B, A)
R (červená), G (zelená) a B (modrá) môžu byť buď
<integer>
s alebo<percentage>
s, kde číslo 255 zodpovedá 100 %. A (alfa) môže byť<číslo>
medzi 0 a 1 alebo<percento>
, kde číslo 1 zodpovedá 100 % (úplná nepriehľadnosť).
Príklad RGBa
rgba(51, 170, 51, .1) / 10% nepriehľadná zelená / rgba(51, 170, 51, .4) / 40% nepriehľadná zelená / rgba(51, 170, 51, .7) / 70% nepriehľadná zelená / rgba(51, 170, 51, 1) / úplne nepriehľadná zelená /
Malý [príklad][2], ktorý ukazuje, ako možno použiť rgba
.
Od roku 2018 prakticky **každý prehliadač podporuje syntax rgba
.
Najjednoduchšie to urobíte pomocou 2 divov, 1 s pozadím a 1 s textom:
-- 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>
Nemôžete. Musíte mať samostatný div, ktorý je len týmto pozadím, aby ste mohli použiť krytie len naň.
Nedávno som to skúšal urobiť, a keďže som už používal jQuery, zistil som, že najmenej problémov mi spôsobuje nasledujúci postup:
text
dajte jednoliatu farbu pozadia, pretože to bude predvolená farba bez JavaScriptu.text
a aplikujte ju na div background
.Som si istý, že existuje nejaký CSS ninja spôsob, ako to všetko urobiť len pomocou floatov alebo niečoho podobného, ale nemal som trpezlivosť na to prísť.