Apakah mungkin untuk mengatur opacity gambar latar tanpa mempengaruhi opacity elemen anak?

Contoh

Semua tautan di catatan kaki memerlukan peluru khusus (gambar latar belakang) dan opacity peluru khusus harus 50%.

HTML

<div id="footer">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
    </ul>
</div>  

CSS

#footer ul li {
    background: url(/images/arrow.png) no-repeat 0 50%;
}  

Apa yang saya coba

Saya mencoba mengatur opacity item daftar menjadi 50%, tetapi kemudian opacity teks tautan juga 50% - dan sepertinya tidak ada cara untuk mengatur ulang opacity elemen anak:

#footer ul li {
    background: url(/images/arrow.png) no-repeat 0 50%;
    /* will also set the opacity of the link text */        
    opacity: 0.5;
}

Saya juga mencoba menggunakan rgba, tetapi itu tidak berpengaruh pada gambar latar:

#footer ul li {
    /* rgba doesn't apply to the background image */
    background: rgba(255, 255, 255, 0.5) url(/images/arrow.png) no-repeat 0 50%;
}

Anda dapat menggunakan CSS linear-gradient()dengan rgba().

div {
  width: 300px;
  height: 200px;
  background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://i.imgur.com/xnh5x47.jpg");
}
span {
  background: black;
  color: white;
}

<div><span>Hello world.</span></div>

Ambil gambar Anda menjadi editor gambar, turunkan opacity, simpan sebagai .png dan gunakan itu.

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 tidak ingin transparansi memengaruhi seluruh wadah dan anak-anaknya, periksa solusi ini. Anda harus memiliki anak yang benar-benar diposisikan dengan orang tua yang relatif diposisikan.

Lihat demo di http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

Jika Anda menggunakan gambar sebagai peluru, Anda dapat mempertimbangkan: sebelum elemen semu.

#footer ul li {
}

#footer ul li:before {
    content: url(/images/arrow.png);
    filter:alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
    opacity:.50;
}

Anda dapat meletakkan gambar di div: after atau div: before dan mengatur opacity pada "virtual div"

div:after {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
  opacity: 0.25;
}

ditemukan di sini http://css-tricks.com/snippets/css/transparent-background-images/

#footer ul li {
  position: relative;
  opacity: 0.99;
}

#footer ul li::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url(/images/arrow.png) no-repeat 0 50%;
  opacity: 0.5;
}

Retas dengan opacity .99 (kurang dari 1) menciptakan konteks indeks-z sehingga Anda tidak dapat khawatir tentang nilai indeks-z global. (Cobalah untuk menghapusnya dan lihat apa yang terjadi di demo berikutnya di mana pembungkus induk memiliki z-indeks positif.)
Jika elemen Anda sudah memiliki z-indeks, maka Anda tidak memerlukan peretasan ini.

Demo teknik ini .

Sayangnya, pada saat menulis jawaban ini, tidak ada cara langsung untuk melakukan ini. Kamu butuh:

1. gunakan gambar semi-transparan sebagai latar belakang (lebih mudah).
2. tambahkan elemen tambahan (seperti div) di sebelah anak-anak yang Anda inginkan buram, tambahkan latar belakang dan setelah membuatnya semi-transparan, posisikan di belakang anak-anak yang disebutkan.

Pilihan lain adalah pendekatan CSS Trik memasukkan elemen pseudo ukuran yang tepat dari elemen asli tepat di belakangnya untuk memalsukan efek latar belakang buram yang kita cari. Terkadang Anda perlu mengatur ketinggian untuk elemen pseudo.

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div::after {
  content: "";
  background: url(image.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

Properti "filter", membutuhkan bilangan bulat untuk persentase opacity alih-alih ganda, agar dapat bekerja untuk IE7 / 8.

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

PS: Saya memposting ini sebagai jawaban, karena SO, membutuhkan setidaknya 6 karakter yang diubah untuk diedit.

Untuk memperbaiki keadaan, saya sarankan menempatkan pilihan yang sesuai di bungkus penargetan browser. Ini adalah satu-satunya hal yang bekerja untuk saya ketika saya tidak bisa mendapatkan IE7 dan IE8 untuk "bermain dengan baik dengan orang lain" (karena saya saat ini bekerja untuk perusahaan perangkat lunak yang terus mendukung mereka).

/* color or background image for all browsers, of course */            
#myBackground {
    background-color:#666; 
}
/* target chrome & safari without disrupting IE7-8 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #myBackground {
        -khtml-opacity:.50; 
        opacity:.50;
    }
}
/* target firefox without disrupting IE */
@-moz-document url-prefix() {
    #myBackground {
        -moz-opacity:.50;
        opacity:0.5;
    }
}
/* and IE last so it doesn't blow up */
#myBackground {
    opacity:.50;
    filter:alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
}

Saya mungkin memiliki redudansi dalam kode di atas - jika ada yang ingin membersihkannya lebih lanjut, silakan saja!

Jika Anda harus mengatur opacity hanya ke bullet, mengapa Anda tidak mengatur saluran alpha langsung ke gambar? By the way, saya tidak berpikir ada cara untuk mengatur opacity ke gambar latar belakang melalui css tanpa mengubah opacity dari seluruh elemen (dan anak-anaknya juga).

Hanya untuk menambahkan ke atas .. Anda dapat menggunakan saluran alfa dengan atribut warna baru misalnya. rgba (0,0,0,0) ok jadi ini hitam tetapi dengan nol opacity sehingga sebagai orang tua tidak akan mempengaruhi anak. Ini hanya berfungsi pada Chrome, FF, Safari dan .... I thin O.

ubah warna hex Anda menjadi RGBA

Saya menemukan tutorial yang cukup bagus dan sederhana tentang masalah ini. Saya pikir ini berfungsi dengan baik (dan meskipun mendukung IE, saya hanya memberi tahu klien saya untuk menggunakan browser lain):

Transparansi latar belakang CSS tanpa mempengaruhi elemen anak, melalui RGBa dan filter

Dari sana Anda dapat menambahkan dukungan gradien, dll.

#footer ul li
     {
       position:relative;
       list-style:none;
     }
    #footer ul li:before
     {
       background-image: url(imagesFolder/bg_demo.png);
       background-repeat:no-repeat;
       content: "";
       top: 5px;
       left: -10px;
       bottom: 0;
       right: 0;
       position: absolute;
       z-index: -1;
       opacity: 0.5;
    }

Anda dapat mencoba kode ini. Saya pikir itu akan berhasil. Anda dapat mengunjungi demo