Cara membuat warna latar belakang div transparan dalam CSS

191

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.

Mistu4u
sumber
3
Atribut CSS 3 juga opacitytidak filterada. Mengapa Anda pikir Anda tidak dapat menggunakannya?
Pekka
Saya tidak tahu, di Eclipse Juno saya, kedua atribut tidak ditampilkan dan sesuai W3School: Catatan: Properti opacity CSS adalah bagian dari rekomendasi W3C CSS3. Lihat di sini
Mistu4u
Dan gerhana saya tidak mendukung (kemungkinan besar) CSS3 !! :(
Mistu4u
1
Saya katakan Anda bisa mengabaikan pesan-pesan itu. Beberapa atribut di luar spesifikasi tetapi masih dapat digunakan di dunia nyata. Kombinasi dari opacity, filterdan beberapa atribut lainnya seperti yang ditunjukkan di sini: css-tricks.com/css-transparency-settings-for-all-broswers akan mencakup hampir semua browser yang ada
Pekka

Jawaban:

140

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/

Paul Fleming
sumber
1
"Jadi saya tidak bisa menggunakan atribut opacity atau filter"
Jerska
4
@Jerska itu adalah premis yang perlu dipertanyakan. Satu-satunya alasannya untuk tidak menggunakan atribut-atribut itu tampaknya karena IDE-nya mengeluhkannya
Pekka
Jadi adakah cara lain untuk mencapainya?
Mistu4u
@Subir jika Anda membutuhkan cara lain, lihat jawaban Jerska. Tetapi seperti yang dikatakan, tampaknya dipertanyakan mengapa Anda ingin menghindari opacitydi tempat pertama.
Pekka
11
Poster menginginkan latar belakang buram, bukan elemen buram. Teks dalam elemen juga akan menjadi buram menggunakan metode opacity. Jawaban ini tidak cukup lengkap untuk menyediakannya. Menggunakan rgba dengan png fallback akan jauh lebih baik.
René
351

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

Jerska
sumber
3
Juga diketik sebagai komentar pada jawaban lain. Hal terbaik adalah menggunakan pewarnaan rgba dan png yang dijelaskan dalam jawaban ini sebagai fallback.
René
2
Kejahatan pada kesederhanaan menggunakan 'transparan' pada atribut warna latar belakang. Pujian mega!
tfont
4

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 */
randominstanceOfLivingThing
sumber
2

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.

user3241848
sumber
1
    /*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 */
ARVIND CHAUHAN
sumber
Harap berikan beberapa penjelasan untuk jawaban Anda dan hindari hanya memposting kode jawaban.
Saeed Zhiany