Kan jeg kun tildele egenskaben opacity
til background
-egenskaben for en div
og ikke til teksten i den?
Jeg har prøvet:
background: #CCC;
opacity: 0.6;
men dette ændrer ikke opaciteten.
Det lyder som om, du ønsker at bruge en gennemsigtig baggrund, i hvilket tilfælde du kan prøve at bruge funktionen rgba()
:
rgba(R, G, B, A)
R (rød), G (grøn) og B (blå) kan være enten
<heltal>
s eller<procent>
s, hvor tallet 255 svarer til 100%. A (alpha) kan være et<tal>
mellem 0 og 1 eller en<procentdel>
, hvor tallet 1 svarer til 100 % (fuld uigennemsigtighed).
RGBa eksempel
rgba(51, 170, 51, 51, .1) / 10% uigennemsigtig grøn / rgba(51, 170, 51, 51, .4) / 40 % uigennemsigtig grøn / rgba(51, 170, 51, .7) / 70% uigennemsigtig grønt / rgba(51, 170, 51, 51, 1) / helt uigennemsigtig grøn /
Et lille [eksempel][2], der viser, hvordan rgba
kan bruges.
Fra 2018 understøtter praktisk talt [alle browsere syntaksen rgba
] (https://caniuse.com/#feat=css3-colors).
Den nemmeste måde at gøre dette på er med 2 divs, 1 med baggrunden og 1 med teksten:
#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>
Det kan du ikke. Du skal have en separat div, som kun er denne baggrund, så du kun kan anvende opaciteten på den.
Jeg prøvede at gøre dette for nylig, og da jeg allerede brugte jQuery, fandt jeg følgende som det mindst besværlige:
text
div'en en ensfarvet baggrundsfarve, fordi det vil være den JavaScript-løse standardfarve.text
div's højde, og anvend den på background
div'en.Jeg'er sikker på at der'er en slags CSS ninja måde at gøre alt dette med kun floats eller noget, men jeg havde'ikke tålmodighed til at finde ud af det.