Hoe maak je div-achtergrondkleur transparant in CSS

Ik gebruik geen CSS3. Ik kan dus geen opacityof filterattributen gebruiken. Hoe kan ik zonder deze attributen de background-colortransparant te maken van een div? Het zou een soort tekstvakvoorbeeld moeten zijn in deze link. Hier is de achtergrondkleur van het tekstvak transparant. Ik wil hetzelfde maken, maar zonder de bovengenoemde attributen te gebruiken.

Antwoord 1, autoriteit 100%

Opaciteit geeft u doorschijnendheid of transparantie. Bekijk een voorbeeld Fiddle hier.

-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-ondoorzichtigheid/

Antwoord 2, autoriteit 94%

Het probleem met opacityis dat het ook de inhoud beïnvloedt, terwijl je vaak niet wilt dat dit gebeurt.

Als je gewoon wilt dat je element transparant is, is het echt zo eenvoudig als:

background-color: transparent;

Maar als je wilt dat het in kleuren is, kun je het volgende gebruiken:

background-color: rgba(255, 0, 0, 0.4);

Of definieer een achtergrondafbeelding (1pxbij 1px) die is opgeslagen met de juiste alpha.
(Gebruik hiervoor Gimp, Paint.Netof een andere afbeeldingssoftware waarmee je dat kunt doen.
Maak gewoon een nieuwe afbeelding, verwijder de achtergrond en plaats er een semi-transparante kleur in en sla deze vervolgens op in png.)

Zoals gezegd door René, zou je beide het beste kunnen combineren met de rgbaeerst en de afbeelding 1pxbij 1pxals 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

Antwoord 3, autoriteit 8%

transparantis de standaardinstelling voor achtergrondkleur

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

Antwoord 4, autoriteit 4%

Van https://developer.mozilla.org/en -VS/docs/Web/CSS/achtergrondkleur

Achtergrondkleur instellen:

/* Hexadecimal value with color and 100% transparency*/
background-color: #11ffee00;  /* Fully transparent */
/* Special keyword values */
background-color: transparent;
/* HSL value with color and 100% transparency*/
background-color: hsla(50, 33%, 25%, 1.00);  /* 100% transparent */
/* RGB value with color and 100% transparency*/
background-color: rgba(117, 190, 218, 1.0);  /* 100% transparent */

Antwoord 5

Het is misschien wat laat voor de discussie, maar het is onvermijdelijk dat iemand dit bericht tegenkomt zoals ik deed. Ik vond het antwoord dat ik zocht en dacht ik post mijn eigen mening erover.
De volgende JSfiddle bevat hoe .PNG’s met transparantie kunnen worden gelaagd. Jerska’s vermelding van het transparantie-attribuut voor de CSS van de div was de oplossing:
http://jsfiddle.net/jyef3fqr/

HTML:

  <button id="toggle-box">toggle</button>
   <div id="box" style="display:none;" ><img src="x"></div>
   <button id="toggle-box2">toggle</button>
   <div id="box2" style="display:none;"><img src="xx"></div>
   <button id="toggle-box3">toggle</button>
   <div id="box3" style="display:none;" ><img src="xxx"></div>

CSS:

#box {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:1;
}
#box2 {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:2;
background-color : transparent;
      }
      #box3 {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:2;
background-color : transparent;
      }
 body {background-color:#c0c0c0; }

JS:

$('#toggle-box').click().toggle(function() {
$('#box').animate({ width: 'show' });
}, function() {
$('#box').animate({ width: 'hide' });
});
$('#toggle-box2').click().toggle(function() {
$('#box2').animate({ width: 'show' });
}, function() {
$('#box2').animate({ width: 'hide' });
});
$('#toggle-box3').click().toggle(function() {
$('#box3').animate({ width: 'show' });
 }, function() {
$('#box3').animate({ width: 'hide' });
});

En mijn oorspronkelijke inspiratie:http://jsfiddle.net/5g1zwLe3/
Ik heb paint.net ook gebruikt voor het maken van de transparante PNG’s, of liever de PNG’s met transparante BG’s.

Antwoord 6

   /*Fully Opaque*/
    .class-name {
      opacity:1.0;
    }
    /*Translucent*/
    .class-name {
      opacity:0.5;
    }
    /*Transparent*/
    .class-name {
      opacity:0;
    }
    /*or you can use a transparent rgba value like this*/
    .class-name{
      background-color: rgba(255, 242, 0, 0.7);
      }
    /*Note - Opacity value can be anything between 0 to 1;
    Eg(0.1,0.8)etc */

Antwoord 7

Gebruik zoiets als

<div style='background-color: rgba(0, 0, 0, 0.4);'>

Dit stelt de achtergrondkleur van de div in op zwart, maar ook op 40% transparant.
Dit verandert niets aan de tekst of inhoud van de transparantie van de div’s.