Ik'gebruik geen CSS3. Dus ik kan geen opacity
of filter
attributen gebruiken. Hoe kan ik zonder deze attributen te gebruiken de achtergrondkleur
transparant maken van een div
? Het zou een beetje moeten lijken op het tekstvak voorbeeld in deze link. Hier is de achtergrondkleur van het tekstvak transparant. Ik wil hetzelfde maken, maar dan zonder de bovengenoemde attributen te gebruiken.
Het probleem met opacity
is dat het ook de inhoud zal beïnvloeden, terwijl je dat vaak niet wilt.
Als je alleen maar wilt dat je element transparant is, is het echt zo simpel als :
background-color: transparent;
Maar als je het in kleuren wilt, kun je gebruiken:
background-color: rgba(255, 0, 0, 0.4);
Of definieer een achtergrond afbeelding (1px
bij 1px
) opgeslagen met de juiste alpha
.
(Gebruik daarvoor Gimp
, Paint.Net
of een andere afbeeldingssoftware waarmee je dat kunt doen.
Maak gewoon een nieuwe afbeelding, verwijder de achtergrond en zet er een semi-transparante kleur in, en sla het dan op in png).
Zoals gezegd door René, het beste zou zijn om beide te mixen, met de rgba
eerst en de 1px
bij 1px
afbeelding als een fallback als de browser alpha niet ondersteunt:
background: url('img/red_transparent_background.png');
background: rgba(255, 0, 0, 0.4);
Zie ook : http://www.w3schools.com/cssref/css_colors_legal.asp.
Demo : [Mijn JSFiddle](
)Opaciteit geeft je doorschijnendheid of transparantie. Zie een voorbeeld [Fiddle hier][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 */
Opmerking: dit zijn GEEN CSS3 eigenschappen
Zie http://css-tricks.com/snippets/css/cross-browser-opacity/
transparent is de standaard voor achtergrondkleur