Apa cara terbaik (jika ada) untuk membuat gambar tampak "abu-abu" dengan CSS (yaitu, tanpa memuat versi gambar yang terpisah dan berwarna abu-abu)?
Konteks saya adalah bahwa saya memiliki baris dalam tabel yang semuanya memiliki tombol di sel paling kanan dan beberapa baris perlu terlihat lebih ringan daripada yang lain. Jadi saya dapat membuat font lebih ringan tentu saja tetapi saya juga ingin membuat gambar lebih ringan tanpa harus mengelola dua versi setiap gambar.
Gunakan properti filter CSS3:
Dukungan browser agak buruk tetapi 100% CSS. Artikel bagus tentang properti filter CSS3 dapat Anda temukan di sini: http://blog.nmsdvid.com/css-filter-property/
sumber
contrast(x%)
properti, misgrayscale(100%) contrast(30%)
.img { filter: grayscale(100%); opacity: 0.4; }
Kamu disini:
Css Grey:
Belum ditampilkan:
Saya menemukannya di: http://zkiwi.com/topic/chuyen-hinh-mau-thanh-trang-den-bang-css-nhu-the-nao
Sunting: IE10 + tidak mendukung filter DX seperti yang dilakukan IE9 dan sebelumnya, juga tidak mendukung versi sebelumnya dari filter abu-abu. Anda dapat memperbaikinya, gunakan satu dari dua solusi di bawah ini:
<meta http-equiv="X-UA-Compatible" content="IE=9">
sumber
Jika Anda tidak keberatan menggunakan sedikit JavaScript, fadeTo () jQuery berfungsi dengan baik di setiap browser yang saya coba.
sumber
Lebih baik mendukung semua browser:
sumber
Berikut ini contoh yang memungkinkan Anda mengatur warna latar belakang. Jika Anda tidak ingin menggunakan float, maka Anda mungkin perlu mengatur lebar dan tinggi secara manual. Tetapi itu pun sangat tergantung pada CSS / HTML di sekitarnya.
sumber
Menjadi abu-abu:
"Untuk mencapai achromatize."
"Mengisi dengan abu-abu."
Catatan yang bermanfaat
Apa perbedaan antara grayscale dan saturate filter CSS3?
https://www.w3.org/TR/filter-effects-1
sumber
Anda dapat menggunakan
rgba()
css untuk menentukan warna, bukanrgb()
. Seperti ini:style='background-color: rgba(128,128,128, 0.7);
Memberimu warna yang sama dengan
rgb(128,128,128)
tetapi dengan opacity 70% sehingga barang-barang di belakang hanya menunjukkan melalui 30%. Tapi CSS3 berfungsi di sebagian besar browser sejak 2008. Maaf, tidak ada sintaks #rrggbb yang saya ketahui. Bermainlah dengan angka - Anda bisa mencuci dengan putih, bayangan dengan abu-abu, apa pun yang ingin Anda encerkan.OK jadi Anda membuat persegi panjang abu-abu semi-transparan (atau warna apa pun) dan meletakkannya di atas gambar Anda, mungkin dengan posisi: absolut dan indeks-z lebih tinggi dari nol, dan Anda meletakkannya tepat sebelum gambar dan default lokasi untuk persegi panjang akan menjadi sudut kiri atas gambar Anda. Harus bekerja
sumber
Menimbang filter: ekspresi adalah ekstensi Microsoft ke CSS, jadi itu hanya akan berfungsi di Internet Explorer. Jika Anda ingin menghapusnya, saya sarankan Anda mengatur opacity menjadi 50% menggunakan sedikit javascript.
http://lyxus.net/mv akan menjadi tempat yang baik untuk memulai, karena membahas skrip opacity yang berfungsi dengan Firefox, Safari, KHTML, Internet Explorer, dan browser yang mendukung CSS3.
Anda mungkin juga ingin memberinya batas abu-abu.
sumber