Cara membuat warna latar belakang div transparan dalam CSS

Saya tidak menggunakan CSS3. Jadi saya tidak bisa menggunakan opacityatau filteratribut. Tanpa menggunakan atribut ini bagaimana saya bisa membuat background-colortransparan div? Ini harus berupa contoh kotak teks di tautan ini . Di sini warna latar belakang kotak teks transparan. Saya ingin membuat yang sama, tetapi tanpa menggunakan atribut yang disebutkan di atas.

Opacity memberi Anda transparansi atau transparansi. Lihat contoh Fiddle di sini .

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

Catatan: ini BUKAN properti CSS3

Lihat http://css-tricks.com/snippets/css/cross-browser-opacity/

Masalahnya opacityadalah bahwa itu juga akan mempengaruhi konten, ketika seringkali Anda tidak ingin ini terjadi.

Jika Anda hanya ingin elemen Anda transparan, itu semudah:

background-color: transparent;

Tetapi jika Anda menginginkannya dalam warna, Anda dapat menggunakan:

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

Atau menentukan gambar latar belakang ( 1pxoleh 1px) disimpan dengan tepat alpha.
(Untuk melakukannya, gunakan Gimp, Paint.Netatau perangkat lunak gambar lain yang memungkinkan Anda melakukannya.
Cukup buat gambar baru, hapus latar belakang dan masukkan warna semi-transparan di dalamnya, lalu simpan dalam png.)

Seperti yang dikatakan oleh René , hal terbaik untuk dilakukan akan mencampur kedua, dengan rgbapertama dan 1pxoleh 1pxgambar sebagai fallback jika browser tidak mendukung alpha:

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

Lihat juga : http://www.w3schools.com/cssref/css_colors_legal.asp .

Demo : JSFiddle saya

transparan adalah default untuk warna latar belakang

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

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

Untuk mengatur warna latar belakang:

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

Mungkin agak terlambat untuk diskusi tetapi seseorang pasti akan tersandung ke posting ini seperti saya. Saya menemukan jawaban yang saya cari dan berpikir saya akan memposting pendapat saya sendiri. JSfiddle berikut mencakup cara melapisi .PNG dengan transparansi. Penyebutan atribut transparansi Jerska untuk CSS div adalah solusinya: 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' });
});

Dan inspirasi asli saya: http://jsfiddle.net/5g1zwLe3/ Saya juga menggunakan paint.net untuk membuat PNG transparan, atau lebih tepatnya PNG dengan BG transparan.

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