Atur opacity gambar latar tanpa mempengaruhi elemen anak


214

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%;
}


Jawaban:


119

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>


Ini solusi terbaik!
Dzenis H.

93

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


8
Hmm ... saya baru saja downvoted, tetapi lihat jawaban yang diterima ini: stackoverflow.com/a/6502295/131809 terbalik 10 kali, dan cukup identik.
Alex

9
Ini adalah pilihan yang baik, tidak tahu mengapa begitu banyak downvotes. Jika saya bisa membenarkan ini dua kali saya akan. Elemen anak dari elemen induk sebagian buram akan menjadi sebagian buram, dan seharusnya. Semua "solusi" adalah bug yang pada akhirnya harus diperbaiki.
RobW

6
@ mystrdat Anda sudah mengunduh gambar, ini bukan permintaan tambahan.
brad

2
@ mystrdat Tapi dia sudah mengunduh gambar panah. Anda belum memberikan solusi non-gambar, jadi itu maksud saya. Dia sudah mengunduh gambar panah, mungkin juga diperlukan, yang tidak akan menjadi permintaan tambahan. Saya tidak mengerti dari mana Anda berasal.
brad

1
@brad saya minta maaf, ternyata saya sudah membaca pertanyaan yang salah sekarang saya periksa lagi.
mystrdat

42

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/


Saya pikir Anda perlu mengubah "tanda kutip dalam kode di atas menjadi" agar dapat berfungsi ketika disalin langsung.
nsantorello

6
apakah jawaban ini masih merupakan solusi terbaik yang ditemukan orang terhadap masalah: "bagaimana membuat elemen turunan tidak mewarisi nilai opacity CSS elemen induk"? Saya butuh anak untuk benar-benar menjadi anak kecil .. dan dalam aliran dokumen ... dan juga tidak ingin memasukkan javascript / flash untuk ini; lebih suka CSS murni.
govinda

Saya memiliki 50% orang tua buram <li> yang berisi gambar anak yang saya inginkan 100% buram. Mengatur <li> ke position:relative;dan img ke position:absolute;TIDAK memungkinkan saya untuk menimpa opacity yang diwarisi pada img, dan saya tidak dapat menggunakan penentuan posisi absolut untuk <li> sendiri (itu berantakan ;-). Dalam Javascript saya mencoba imgs[i].style.opacity = '1';, tetapi itu juga tidak berfungsi untuk menimpa opacity yang diwarisi. Jika saya mengerti dengan benar, saya juga tidak dapat menggunakan rgba karena saya harus memengaruhi img sendiri, bukan hanya warna latar belakang. Adakah yang punya rekomendasi untuk saya?
govinda

26
Seluruh jawaban ini tidak masuk akal. Kode yang diberikan, di atas menjadi persis apa yang penanya tidak ingin lakukan karena tidak berfungsi , tidak cocok dengan deskripsi, atau tautannya. Saya mengalami kesulitan memahami mengapa begitu banyak orang yang mengangkatnya.
BoltClock

Jika pertanyaannya adalah 'Bagaimana mengatur transparansi 50% pada suatu elemen', ini akan menjadi jawaban yang bagus.
lharby

29

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;
}

3
Filter hanyalah solusi IE
Hussein

1
Saya pikir ini mungkin solusi terbaik. Ini adalah solusi CSS murni. Mungkin juga untuk meretas dukungan IE7 menggunakan *zoom: expression( … );(lihat : setelah dan: sebelum elemen css pseudo meretas untuk IE 7 ), tetapi IE7 akhirnya menjadi ketinggalan jaman.
thirdender


9
#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 .


Tahukah Anda mengapa kami perlu menetapkan nilai opacity kurang dari 1? Apakah ini solusi lintas browser?
zVictor

1
@ zVictor ya, ini adalah perilaku berstandar w3c. Lihat Memahami CSS z-index: Konteks penumpukan .
pengguna

4

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.

4

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;   
}

3

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.


2

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!


3
Tidak perlu menargetkan setiap browser secara terpisah, cukup gunakan awalan browser di dalam satu blok pemilih. Dengan awalan peramban, peramban hanya akan menggunakan properti CSS yang sesuai. Seiring berjalannya waktu dan sintaks untuk properti itu menjadi terstandarisasi, vendor browser akan menjatuhkan dukungan untuk awalan dan menggunakan properti CSS tanpa awalan apa pun (misalnya, Firefox menjatuhkan dukungan untuk -moz-border-radiusdi Firefox 13 dan hanya mencari border-radiusproperti standar sekarang). IE7 dan IE8 adalah cerita yang berbeda, tapi itu hanya IE :-p
thirdender

Saya ingin tahu siapa yang memilih ini dan mengapa, tolong. Pemungutan suara tidak berguna tanpa umpan balik informatif. Saya ingin dapat meningkatkan jawaban saya. Jika itu hanya karena info itu sudah ketinggalan zaman, periksa tanggal. :) Terima kasih.
kode-sushi

@ code-sushi: Jika downvote terjadi sekitar waktu yang sama dengan komentar Anda, pertimbangkan bahwa itu mungkin berasal dari orang lain yang kebetulan setuju dengan komentar pihak ketiga (perhatikan upvotes pada komentar itu sendiri). Saya tidak memilih jawaban Anda, tetapi saya harus setuju - saya ingin menambahkan bahwa 1) KHTML tidak akan pernah melihat -khtml-opacitykarena tidak mengerti permintaan media, menjadikannya tidak berguna 2) IE lebih stabil daripada yang Anda pikirkan; itu tidak akan "meledak" hanya karena Anda menambahkan awalan non-IE ke aturan yang berlaku untuk IE. Masalahnya, pada saat Anda menghadapinya, pasti datang dari tempat lain.
BoltClock

Jawaban asli saya adalah dari hampir 2 tahun yang lalu dan suara turun terjadi baru-baru ini, seperti tahun ini. Saya penasaran. Adapun komentar IE mereka berkaitan dengan 7 ketika itu masih membutuhkan dukungan; Saya cukup yakin itu OK sekarang dalam kebanyakan kasus untuk mengabaikan IE 7 hari ini. Terima kasih atas tanggapan Anda.
kode-sushi

1

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).


1

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


4
Ini tidak akan berfungsi dengan background-imageseperti yang diminta oleh OP.
Torsten Walter

1

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.


Yah, itu tidak akan bekerja secara langsung. Anda perlu meletakkan div sebagai elemen aparent dengan warna latar belakang: (255.255.255.0,5) misalnya
Francisco

0
#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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.