Hvordan man gør div baggrundsfarve gennemsigtig i CSS

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.

Derek 朕會功夫
Redigeret spørgsmål 2015ør juli 2015 в 12:16
Programmering
html css background-color transparent
2012ør august 2012 в 8:57
15 visninger

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](http://jsfiddle.net/APSnL/68/)

Jerska
Redigeret svar 2017ør august 2017 в 12:20
Kommentarer (2)
Løsning

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/

Adrien Be
Redigeret svar 2014ør februar 2014 в 11:35
Kommentarer (12)

transparent er standard for background-color

http://www.w3schools.com/cssref/pr_background-color.asp

Kommentarer (2)