Warna latar belakang CSS transparan

91

Saya ingin membuat latar belakang menu daftar menghilang dengan menggunakan opacity, tanpa mempengaruhi font. Apakah mungkin dengan CSS3?

html css opacity

— Saranya
sumber

Ya, tentu! Anda dapat melakukannya dengan trik ini: stackoverflow.com/a/15351192/366884 Semoga beruntung

— Saud Alfadhli

120

sekarang Anda dapat menggunakan rgba di properti CSS seperti ini:

.class {
    background: rgba(0,0,0,0.5);
}

0,5 adalah transparansi , ubah nilainya sesuai desain Anda.

Demo langsung http://jsfiddle.net/EeAaB/

info lebih lanjut http://css-tricks.com/rgba-browser-support/

— Rohit Azad Malik
sumber

Terima kasih. tapi saya ingin menghilangkan tanda panah default di menu daftar tanpa mempengaruhi font

— Saranya

1

apakah ada cara untuk menulis ini lebih pendek, seperti rgba('black', 0.5)?

— phil294

44

Ingatlah ketiga opsi ini (Anda ingin # 3):

1) Seluruh elemen transparan:

visibility: hidden;

2) Seluruh elemen agak transparan:

opacity: 0.0 - 1.0;

3) Hanya latar belakang elemen yang transparan:

background-color: transparent;

— jordanb
sumber

14

ya, itu mungkin. cukup gunakan sintaks-rgba untuk warna latar belakang Anda.

.menue{
  background-color: rgba(255, 0, 0, 0.5); //semi-transparent red
}

— oezi
sumber

2

Hai! Apakah Anda tahu sesuatu tentang definisi CSS 'background-color' dengan saluran aplha, tetapi dengan menggunakan nilai #HEX untuk warna?

— Piotr Stępniewski

@ PiotrStępniewski Mungkin terlambat, tapi sekarang ada sintaks seperti itu (lihat jawaban saya )

— FZs

10

Berikut adalah contoh kelas menggunakan CSS bernama warna:

.semi-transparent {
  background: yellow;
  opacity: 0.25;
}

Ini menambahkan latar belakang 25% buram (berwarna) dan 75% transparan.

CAVEAT Sayangnya, opacity akan mempengaruhi seluruh elemen yang dilampirkan padanya.
Jadi jika Anda memiliki teks dalam elemen itu, itu akan mengatur teks menjadi 25% opacity juga. :-(

Cara untuk melewati ini adalah dengan menggunakan metode rgbaatau hslauntuk menunjukkan transparansi sebagai bagian dari "warna" latar belakang yang Anda inginkan. Ini memungkinkan Anda untuk menentukan transparansi latar belakang, terlepas dari transparansi item lain di elemen Anda.

Berikut 3 cara untuk menyetel latar belakang biru pada transparansi 75%, tanpa memengaruhi elemen lain:

background: rgba(0%, 0%, 100%, 0.75)
background: rgba(0, 0, 255, 0.75)
background: hsla(240, 100%, 50%, 0.75)

— SherylHohman
sumber

8

Dalam hal ini background-color:rgba(0,0,0,0.5);adalah cara terbaik. Sebagai contoh:background-color:rgba(0,0,0,opacity option);

— dasdasdasdasd
sumber

6

Untuk mencapainya, Anda harus memodifikasi background-colorelemennya.

Cara membuat warna (semi-) transparan:

Nama warna CSS transparentmenciptakan warna yang sepenuhnya transparan.

Pemakaian:
```
  .transparent{
    background-color: transparent;
  }
```

Menggunakan rgbaatau hslafungsi warna, yang memungkinkan Anda menambahkan saluran alfa (opasitas) ke fungsi rgbdan hsl. Nilai alfa mereka berkisar dari 0 - 1.

Pemakaian:

  .semi-transparent-yellow{
    background-color: rgba(255, 255, 0, 0.5);
  }
  .transparent{
    background-color:  hsla(0, 0%, 0%, 0);
  }

Selain solusi yang telah disebutkan, Anda juga dapat menggunakan format HEX dengan nilai alfa ( #RRGGBBAAatau #RGBAnotasi ).

Itu cukup baru (dimuat oleh CSS Color Module Level 4), tetapi sudah diterapkan di browser yang lebih besar (maaf, tidak ada IE).

Ini berbeda dari solusi lain, karena ini memperlakukan saluran alfa (opasitas) sebagai nilai heksadesimal juga, membuatnya berkisar dari 0 - 255 ( FF).

Pemakaian:
```
  .semi-transparent-yellow{
    background-color: #FFFF0080;
  }
  .transparent{
    background-color: #0000;
  }
```

Anda juga dapat mencobanya:

transparent:

Tampilkan cuplikan kode

div {
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px;
  border: 1px dashed grey;
  
  background-color: transparent;
}

<img src="https://via.placeholder.com/200x100">
<div>
  Using `transparent`
</div>

Luaskan cuplikan

rgba():

Tampilkan cuplikan kode

div {
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px;
  border: 1px dashed grey;
  
  background-color: rgba(0, 255, 0, 0.3);
}

<img src="https://via.placeholder.com/200x100">
<div>
  Using `rgba()`
</div>

Luaskan cuplikan

#RRGGBBAA:

Tampilkan cuplikan kode

div {
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px;
  border: 1px dashed grey;
  
  background-color: #FF000060
}

<img src="https://via.placeholder.com/200x100">
<div>
  Using `#RRGGBBAA`
</div>

Luaskan cuplikan

— FZs
sumber

5

Coba ini:

opacity:0;

Untuk IE8 dan sebelumnya

filter:Alpha(opacity=0);

Demo Opacity dari W3Schools

— Vinod
sumber

6

Situs yang Anda tautkan ... mengerikan.

— John Dvorak

1

@TheWandererr Saya akan mulai dengan halaman yang ditautkan. Ingatlah bahwa itu seharusnya menunjukkan kode teladan. Namun ... Tidak ada lekukan. Perhatikan bahwa mereka menggunakan doctype HTML5, yang berarti mereka memperbarui halaman setelah ditautkan di sini, atau mereka menggunakan HTML5 setengah tahun sebelum halaman tersebut bahkan dalam status rekomendasi kandidat. Berikutnya: CSS sebaris buruk, untuk penyimpanan dalam cache dan untuk keterbacaan. Mereka agak harus menggunakannya di sini karena mereka hanya memiliki satu panel untuk seluruh sumber halaman, tetapi jika mereka menggunakan beberapa panel, seperti yang dilakukan jsfiddle (2010). Dan bahkan untuk halaman yang menunjukkan opasitas,

— John Dvorak

1

@TheWandererr mereka bisa melakukannya lebih baik. Dengan menunjukkan efek pada elemen bertingkat atau dengan mengizinkan tindakan arahkan kursor untuk menonaktifkannya, salah satunya. Lalu ada keseluruhan "berpura-pura menjadi konsorsium w3, dan ketika Anda menemukan luncurkan atau dua reskin lagi, juga diberi label sebagai w3something" hal - agak tidak jujur jika Anda bertanya kepada saya. Mereka juga mengatakan bahwa contoh mereka mungkin "disederhanakan agar terbaca" dan "terus-menerus ditinjau", tetapi menghapus spasi tidak membantu keterbacaan dan dukungan IE7 juga bukan tren baru. Juga, siapa yang tidak akan membayar $ 100 untuk selembar kertas yang merusak kredibilitas mereka?

— John Dvorak

1

@TheWandererr IIRC, mereka dulu memiliki pratinjau pengujian. Pertanyaannya adalah campuran dari hal-hal sepele dan hal-hal tingkat pemula. Mereka mungkin memiliki beberapa jawaban yang agak salah juga. Adapun bagian opacity dari tutorial CSS mereka: tiga header yang didedikasikan untuk membuat gambar transparan - mereka hanya mengubah pemilih CSS. Kemudian dua paragraf lagi - satu untuk memperkenalkan RGBA (akhirnya hanya latar belakang yang transparan) dan satu lagi sebagai "contoh integrasi" (yay! Juga, tidak ada lekukan). Lalu ... itu saja. Tidak ada yang lebih tentang opacity. Dan tidak, nanti juga tidak ada topik "keburaman lanjutan".

— John Dvorak

1

@TheWandererr mari kita bicara tentang Javascript: Semua contoh mereka termasuk: tanpa indentasi (bahkan dalam kode Javascript); innerHTML =(hei, setidaknya itu lebih baik daripada peringatan dan document.writemereka biasa melakukannya di tahun 2012, tetapi masih tidak ada manipulasi DOM, di luar tutorial jQuery kecuali untuk sedikit tutorial di mana mereka mencantumkan metode yang relevan satu per bab, dan bahkan kemudian itu hanya seletion - dan ya, mereka mendaftar document.write). Tutorial XHR mereka menggunakan readyStateChange dan bukan onLoad (didukung sejak IE7). Oh dan solusi mereka untuk fungsi di JSON? Stringify mereka untuk dievaluasi nanti

— John Dvorak

2

Ya, Anda hanya bisa teks biasa sebagai

.someDive{
    background:transparent 
}

— Emin Adiloglu
sumber