Cum sa faci div culoarea de fundal transparent în CSS

Am'm nu folosind CSS3. Deci nu pot't folosi opacitate " sau " filtruatribute. Fără a utiliza aceste atribute cum pot facebackground-colortransparent de odiv`? Acesta ar trebui să fie un fel de caseta de text exemplu în acest link. Aici caseta de text culoarea de fundal să fie transparentă. Vreau să fac același lucru, dar fără a utiliza atributele menționate mai sus.

Derek 朕會功夫
Întrebarea editată 19 iulie 2015 в 12:16
Programare
html css background-color transparent
4 august 2012 в 8:57
37 vizualizări
Comentarii la întrebare (7)

Problema cu opacitatea este că aceasta va afecta, de asemenea, de conținut, de multe ori atunci când nu doriți acest lucru să se întâmple.

Dacă doriți doar elementul tău să fie transparente, l's chiar la fel de ușor ca :

background-color: transparent;

Dar dacă vrei să fie în culori, puteți folosi:

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

Sau defini o imagine de fundal (1px " cu "1px) a salvat cu dreptul "alfa". (Pentru a face acest lucru, utilizați Gimp, `Paint.Net sau orice alt software de imagine care vă permite să faci asta. Doar a crea o imagine nouă, ștergere fundal și a pus-o semi-transparent de culoare în ea, apoi salvați-l în format png.)

Așa cum a spus de René, cel mai bun lucru de făcut ar fi să se amestecă ambele, cu rgba prima și 1px " cu " 1px` imaginea ca o rezervă în cazul în care browser-ul nu - 't sprijinul alpha :

background: url('img/red_transparent_background.png');
background: rgba(255, 0, 0, 0.4);

A se vedea, de asemenea, : http://www.w3schools.com/cssref/css_colors_legal.asp.

Demo : [- Mi JSFiddle](http://jsfiddle.net/APSnL/68/)

Jerska
Răspuns editat 4 august 2017 в 12:20
Comentarii (2)
Soluția

Opacitate vă oferă transluciditatea sau transparență. Vezi un exemplu [Vioara aici][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 */

Notă: acestea NU sunt proprietăți CSS3

A se vedea http://css-tricks.com/snippets/css/cross-browser-opacity/

Adrien Be
Răspuns editat 24 februarie 2014 в 11:35
Comentarii (12)

transparente este implicit pentru culoare de fundal

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

Comentarii (2)

Din https://developer.mozilla.org/en-US/docs/Web/CSS/background-color

Pentru a seta culoarea de fundal:

/* 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 */
Comentarii (0)

Acesta ar putea fi un pic mai târziu la discuții, dar, în mod inevitabil, cineva va da pe acest post, cum am făcut eu. Răspunsul l-am găsit am fost în căutarea pentru și m-am'd postul meu propriu. Următoarele JSfiddle include modul de strat .PNG's, cu transparență. Jerska's mai vorbim de transparență atribut pentru div's CSS a fost soluția: http://jsfiddle.net/jyef3fqr/

HTML:

   toggle
   <div id="box" style="display:none;" ></div>
   toggle
   <div id="box2" style="display:none;"></div>
   toggle
   <div id="box3" style="display:none;" ></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' });
});

Și-mi inspirația originală:http://jsfiddle.net/5g1zwLe3/ De asemenea, am folosit paint.net pentru crearea PNG transparent's, sau mai degrabă PNG's cu BG transparent's.

Comentarii (0)
    /*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 */
Comentarii (1)