Kan jeg tilordne opacity
-egenskapen bare til background
-egenskapen til en div
og ikke til teksten på den?
Jeg har prøvd:
background: #CCC;
opacity: 0.6;
men dette endrer ikke ugjennomsiktigheten.
Det høres ut som om du vil bruke en gjennomsiktig bakgrunn, i så fall kan du prøve å bruke funksjonen rgba()
:
rgba(R,G,B,A)
R (rød), G (grønn) og B (blå) kan enten være
<heltall>
er eller<prosent>
er, der tallet 255 tilsvarer 100 %. A (alfa) kan være et "heltall" mellom 0 og 1, eller en "prosentandel", der tallet 1 tilsvarer 100 % (full opasitet).
RGBa eksempel
rgba(51, 170, 51, .1) / 10 % ugjennomsiktig grønn / rgba(51, 170, 51, .4) / 40% ugjennomsiktig grønn / rgba(51, 170, 51, .7) / 70% ugjennomsiktig grønn / rgba(51, 170, 51, 1) / helt ugjennomsiktig grønn /
Et lite [eksempel][2] som viser hvordan rgba
kan brukes.
Per 2018 støtter praktisk talt alle nettlesere rgba
-syntaksen.
Den enkleste måten å gjøre dette på er med 2 divs, 1 med bakgrunnen 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 må ha en egen div som bare er den bakgrunnen, slik at du bare kan bruke opaciteten på den.
Jeg prøvde å gjøre dette nylig, og siden jeg allerede brukte jQuery, fant jeg følgende for å være minst bryet:
tekst
div en solid bakgrunnsfarge, fordi det vil være JavaScript-mindre standard.text
div' s høyde, og bruk den på background
div.Jeg er sikker på at det er en slags CSS ninja måte å gjøre alt dette med bare flyter eller noe, men jeg hadde ikke tålmodighet til å finne ut av det.