Saya memiliki sekumpulan <a>
tag dengan warna latar belakang rgba yang berbeda tetapi alfa yang sama. Apakah mungkin untuk menulis satu gaya css yang hanya akan mengubah opasitas atribut rgba?
Contoh singkat kode:
<a href="#"><img src="" /><div class="brown">Link 1</div></a>
<a href="#"><img src="" /><div class="green">Link 2</div></a>
Dan gayanya
a {display: block; position: relative}
.brown {position: absolute; bottom: 0; background-color: rgba(118,76,41,.8);}
.green {position: absolute; bottom: 0; background-color: rgba(51,91,11,.8);}
Apa yang ingin saya lakukan adalah menulis satu gaya yang akan mengubah opasitas saat di <a>
-arahkan, namun warnanya tidak berubah.
Sesuatu seperti
a:hover .green, a:hover .brown {background-color: rgba(inherit,inherit,inherit,1);}
css
hover
background-color
rgba
Fireflight
sumber
sumber
div
dilakukana
elemen Anda di elemen Anda ?a
elemen tingkat blok .a
tag sebagai lawan satu di sekitarimg
dan lainnya di sekitar teks. Fakta bahwa itu didukung oleh HTML 5 adalah bonus yang bagus.Jawaban:
Ini sekarang dapat dilakukan dengan properti khusus:
Untuk memahami cara kerjanya, lihat Bagaimana cara menerapkan opasitas ke variabel warna CSS?
Jika properti kustom bukan merupakan pilihan, lihat jawaban asli di bawah ini.
Sayangnya, tidak, Anda harus menentukan nilai merah, hijau, dan biru lagi untuk setiap kelas:
Anda hanya dapat menggunakan
inherit
kata kunci saja sebagai nilai properti, dan meskipun demikian penggunaan dariinherit
tidak sesuai di sini.sumber
Anda dapat melakukan berbagai hal untuk menghindari keharusan kode keras nomor jika Anda mau. Beberapa metode ini hanya berfungsi jika Anda menggunakan latar belakang putih polos karena mereka benar-benar menambahkan warna putih di atasnya daripada mengurangi opasitas. Yang pertama harus berfungsi dengan baik untuk semua yang disediakan:
position
ke relatif atau absolut pada<div>
tagOpsi 1:
::before
elemen psuedo:Opsi 2: hamparan gif putih:
Opsi 3:
box-shadow
Metode:Variasi dari metode gif, tetapi mungkin memiliki masalah kinerja.
Contoh CodePen: http://codepen.io/chrisboon27/pen/ACdka
sumber
Tidak, itu tidak mungkin.
Anda dapat mencoba pra-prosesor CSS , jika Anda ingin melakukan hal semacam ini.
Dari apa yang saya lihat, setidaknya LESS dan Sass memiliki fungsi yang dapat membuat warna lebih, atau kurang, transparan.
sumber
Tidak, itu tidak mungkin.
Jika Anda ingin menggunakan
rgba
, Anda harus mengatur setiap nilai bersama-sama. Tidak ada cara untuk hanya mengubah alfa.sumber
Sekarang tahun 2017 dan sekarang mungkin dengan
Properti khusus CSS / Variabel CSS ( Caniuse )
Salah satu kasus penggunaan klasik untuk variabel CSS adalah kemampuan untuk mengindividualisasikan bagian nilai properti.
Jadi di sini, alih-alih mengulangi seluruh ekspresi rgba sekali lagi - kami membagi atau 'memisahkan'
rgba
nilai menjadi 2 bagian / variabel (satu untuk nilai rgb dan satu untuk alfa)Kemudian, pada hover kita sekarang dapat memodifikasi variabel --alpha:
Tampilkan cuplikan kode
Codepen
Bacaan lebih lanjut:
Mempersonalisasi Properti CSS dengan Variabel CSS (Dan Wilson)
sumber
ada alternatif, Anda dapat menambahkan gambar latar belakang gradien linier ke warna asli.
Selain itu, dengan properti css3 filter, Anda juga dapat melakukannya, tetapi tampaknya itu akan mengubah warna teks
berikut adalah jsfiddle: https://jsfiddle.net/zhangyu911013/epwyL296/2/
sumber
solusi sederhana:
contoh: https://jsfiddle.net/epwyL296/14/
mainkan saja dengan alfa latar belakang. jika Anda menginginkan terang, bukan kegelapan, ganti # 000 dengan #fff
sumber
Mengapa tidak menggunakan
:hover
dan menentukan opasitas yang berbeda di kelas hover?sumber
fill-opacity
Saya memiliki masalah serupa. Saya memiliki 18 div berbeda yang berfungsi sebagai tombol, dan masing-masing memiliki warna berbeda. Daripada mencari tahu kode warna untuk masing-masing atau menggunakan div: hover selector untuk mengubah opacity (yang mempengaruhi semua anak) saya menggunakan pseudo-class: before seperti dalam jawaban @Chris Boon.
Karena saya ingin melakukan pewarnaan pada masing-masing elemen, saya menggunakan: before untuk membuat div putih transparan pada: hover. Ini adalah pencucian yang sangat mendasar.
Menurut CanIUse.com, ini seharusnya memiliki sekitar 92% dukungan pada awal 2014. ( http://caniuse.com/#feat=css-gencontent )
sumber
Anda dapat melakukan ini dengan variabel CSS, meskipun sedikit berantakan.
Pertama, tetapkan variabel yang hanya berisi nilai RGB, secara berurutan, dari warna yang ingin Anda gunakan:
Kemudian Anda dapat menetapkan nilai RGBA untuk warna dan menarik semuanya kecuali nilai alfa dari variabel ini:
Ini tidak super cantik, tetapi ini memungkinkan Anda menggunakan nilai RGB yang sama tetapi nilai alfa berbeda untuk suatu warna.
sumber
:root
, bisa di kelas elemen, atur warna dasarnya. Terima kasih!Pembaruan: Sayangnya tidak mungkin untuk melakukan itu. Anda harus menulis dua pemilih terpisah dari:
Menurut W3C,
rgba
properti tidak memiliki / mendukunginherit
nilai.sumber
inherit
bukan argumen fungsi yang valid. Anda akan melihat itu tidak berfungsi dengan fungsi CSS lainnya.rgba
dantransitions
? Karena saya tahu itu didukung dengan cukup banyak properti.url()
,attr()
dll juga.inherit
adalah nilai properti saja.url()
dan transisi. Saya hanya tidak 100% yakinrgba
karena itu digunakan untuk warna. Terima kasih telah mendidik saya :)!Saya menghadapi masalah yang sama. Inilah yang saya lakukan dan berfungsi dengan baik (
only alpha changes on hover and also the text is not affected
) dengan langkah-langkah berikut:1) Terapkan kelas yang disorot (atau salah satu pilihan Anda) ke elemen mana pun yang ingin Anda ubah alfa latar belakangnya.
2) Dapatkan warna latar belakang rgba
3) Simpan dalam string dan manipulasi (ubah alfa) seperti yang Anda inginkan saat hover (mouseenter dan mouseleave)
Kode HTML:
Kode CSS:
Kode Javascript:
Bekerja Fiddle: http://jsfiddle.net/HGHT6/1/
sumber
Solusi sederhana dengan
opacity
jika Anda dapat mengakomodasi sedikit perubahan dalambackground-color
:sumber
Ini tentang cara paling sederhana; taruh ini di stylesheet css Anda:
selesai!
sumber