CSS opacity hanya untuk warna latar belakang, bukan teks seperti itu?

Kedengarannya seperti anda ingin menggunakan latar belakang transparan, dalam hal ini anda bisa mencoba menggunakan rgba() fungsi:

rgba(R, G, B, A)

R (red), G (green), dan B (biru) dapat berupa <integer>s atau <persentase>s, di mana jumlah 255 sesuai dengan 100%. A (alpha) dapat menjadi <number> antara 0 dan 1, atau <persentase>, dimana angka 1 sesuai dengan 100% (full opacity).

RGBa contoh

rgba(51, 170, 51, .1) / 10% buram hijau / rgba(51, 170, 51, .4) / 40% buram hijau / rgba(51, 170, 51, .7) / 70% buram hijau / rgba(51, 170, 51, 1) / penuh buram hijau /

Kecil [contoh][2] menunjukkan bagaimana rgba dapat digunakan.

Sebagai 2018, praktis setiap browser mendukung rgba sintaks.

Cara termudah untuk melakukan ini adalah dengan div 2, 1 dengan latar belakang dan 1 dengan teks:

#container {
  position: relative;
  width: 300px;
  height: 200px;
}
#block {
  background: #CCC;
  filter: alpha(opacity=60);
  /* IE */
  -moz-opacity: 0.6;
  /* Mozilla */
  opacity: 0.6;
  /* CSS3 */
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div id="container">
  <div id="block"></div>
  <div id="text">Test</div>
</div>

Untuk Kurang pengguna hanya:

Jika anda don't ingin mengatur warna anda menggunakan RGBA, melainkan menggunakan HEX, ada solusi.

Anda bisa menggunakan mixin seperti:

.transparentBackgroundColorMixin(@alpha,@color) {
  background-color: rgba(red(@color), green(@color), blue(@color), @alpha);
}

Dan menggunakannya seperti:

.myClass {
    .transparentBackgroundColorMixin(0.6,#FFFFFF);
}

Benar-benar ini adalah apa yang built-in Kurang fungsi juga menyediakan:

.myClass {
    background-color: fade(#FFFFFF, 50%);
}

Lihat https://stackoverflow.com/questions/14860874/how-do-i-convert-a-hexadecimal-color-to-rgba-with-the-less-compiler

Ini akan bekerja dengan setiap browser

div {
    -khtml-opacity: .50;
    -moz-opacity: .50;
    -ms-filter: ”alpha(opacity=50)”;
    filter: alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
    opacity: .50;
}

Jika anda don't ingin transparansi untuk mempengaruhi seluruh wadah dan anak-anak, check pemecahan masalah ini. Anda harus benar-benar diposisikan anak dengan relatif strategis orang tua untuk mencapai hal ini. CSS Opacity Yang tidak Mempengaruhi Elemen Anak

Memeriksa kerja demo di CSS Opacity Yang Doesn't Mempengaruhi "Anak"

Trik saya adalah untuk menciptakan perusahaan yang transparan .png dengan warna dan menggunakan background:url().

Aku punya masalah yang sama. Saya ingin 100% transparan warna latar belakang. Cukup gunakan kode ini; it's bekerja besar bagi saya:

rgba(54, 25, 25, .00004);

Anda dapat melihat contoh-contoh di sisi kiri pada halaman web ini (formulir kontak area).

Sebuah cara yang bagus untuk melakukan ini adalah dengan menggunakan CSS 3 memang.

Membuat div lebar kelas - misalnya supersizer di bagian atas halaman anda:

Kemudian mengatur properti CSS berikut:

  .supersizer {
    background: url("http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png") no-repeat center center fixed;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    opacity: 0.5;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    top: 0;
  }

<div class="supersizer"></div>

Bagi siapa saja yang datang di thread ini, di sini's sebuah naskah yang disebut thatsNotYoChild.js bahwa saya hanya menulis yang memecahkan masalah ini secara otomatis:

http://www.impressivewebs.com/fixing-parent-child-opacity/

Pada dasarnya, memisahkan anak-anak dari elemen induk, namun tetap unsur dalam lokasi fisik yang sama pada halaman.

Solusi termudah adalah dengan membuat 3 div. Salah satu yang akan berisi 2 lainnya, yang satu dengan latar belakang transparan dan satu dengan konten. Membuat div's posisi relatif dan mengatur dengan latar belakang transparan untuk negatif z-index, kemudian mengatur posisi isi sesuai dengan latar belakang transparan. Dengan cara ini anda tidak't memiliki masalah dengan posisi absolut.

Gunakan:

background:url("location of image"); // Use an image with opacity

Metode ini akan bekerja di semua browser.

Anda dapat't. Anda harus memiliki terpisah div bahwa hanya itu latar belakang, sehingga anda hanya dapat menerapkan opacity untuk itu.

Saya mencoba melakukan hal ini baru-baru ini, dan karena saya sudah menggunakan jQuery, saya menemukan berikut untuk menjadi yang paling repot:

1. Buat dua yang berbeda div. Mereka'll menjadi saudara, tidak terkandung dalam satu sama lain atau apa pun.
2. Memberikan teks div warna latar belakang yang kuat, karena itu akan menjadi JavaScript-kurang default.
3. Menggunakan jQuery untuk mendapatkan teks div's tinggi badan, dan menerapkannya ke latar belakang div.

I'm yakin ada's beberapa jenis CSS ninja cara untuk melakukan semua ini hanya dengan mengapung atau sesuatu, tapi aku tidak't memiliki kesabaran untuk mencari tahu.