Jeg bruger ikke CSS3. Så jeg kan ikke bruge opacity
eller filter
-attributter. Hvordan kan jeg uden at bruge disse attributter gøre background-color
gennemsigtig i en div
? Det skal være lidt ligesom tekstbokseeksemplet i dette link. Her er tekstboksens baggrundsfarve gennemsigtig. Jeg vil gerne lave det samme, men uden at bruge de ovennævnte attributter.
Problemet med opacity
er, at det også vil påvirke indholdet, hvilket du ofte ikke ønsker, at det skal ske.
Hvis du bare vil have dit element til at være gennemsigtigt, er det faktisk lige så nemt som :
background-color: transparent;
Men hvis du vil have det til at være i farver, kan du bruge:
background-color: rgba(255, 0, 0, 0.4);
Eller definere et baggrundsbillede (1px
ved 1px
) gemt med den rigtige alpha
.
(Brug Gimp
, Paint.Net
eller et andet billedprogram, der gør det muligt at gøre det, til at gøre det.
Du skal bare oprette et nyt billede, slette baggrunden og sætte en halvtransparent farve i det, og så gemme det i png).
Som sagt af René, ville det bedste være at blande begge dele, med rgba
først og 1px
ved 1px
billede som fallback hvis browseren ikke understøtter alpha :
background: url('img/red_transparent_background.png');
background: rgba(255, 0, 0, 0.4);
Se også : http://www.w3schools.com/cssref/css_colors_legal.asp.
Demo : [Min JSFiddle](
)Opacitet giver dig gennemsigtighed eller transparens. Se et eksempel [Fiddle her][1].
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
filter: alpha(opacity=50); /* IE 5-7 */
-moz-opacity: 0.5; /* Netscape */
-khtml-opacity: 0.5; /* Safari 1.x */
opacity: 0.5; /* Good browsers */
Bemærk: dette er IKKE CSS3-egenskaber
Se http://css-tricks.com/snippets/css/cross-browser-opacity/
transparent er standard for background-color