Apakah ada cara sederhana untuk menampilkan bitmap warna dalam skala abu-abu hanya dengan HTML/CSS
?
Tidak perlu kompatibel dengan IE (dan saya kira tidak akan) - jika bekerja di FF3 dan / atau Sf3, itu cukup baik untuk saya.
Saya tahu saya bisa melakukannya dengan baik SVG
dan Canvas, tapi itu sepertinya banyak pekerjaan sekarang.
Apakah ada cara orang yang benar-benar malas untuk melakukan ini?
Jawaban:
Dukungan untuk filter CSS telah masuk ke Webkit. Jadi kami sekarang memiliki solusi lintas-browser.
Bagaimana dengan Internet Explorer 10?
Anda dapat menggunakan polyfill seperti abu - abu .
sumber
Sebagai lanjutan dari jawaban brillout.com , dan juga jawaban Roman Nurik , dan agak merelaksasi persyaratan 'tidak ada SVG', Anda dapat menghilangkan desaturasi gambar di Firefox hanya dengan menggunakan satu file SVG dan beberapa CSS.
File SVG Anda akan terlihat seperti ini:
Simpan itu sebagai resources.svg, itu dapat digunakan kembali mulai sekarang untuk gambar apa pun yang ingin Anda ubah ke skala abu-abu.
Di CSS Anda, Anda mereferensikan filter menggunakan
filter
properti khusus Firefox :Tambahkan MS proprietary juga jika Anda suka, terapkan kelas itu ke gambar apa pun yang ingin Anda konversi ke skala abu-abu (berfungsi di Firefox> 3.5, IE8) .
sunting : Berikut adalah posting blog yang bagus yang menggambarkan penggunaan
filter
properti CSS3 baru dalam jawaban SalmanPK sejalan dengan pendekatan SVG yang dijelaskan di sini. Dengan menggunakan pendekatan itu Anda akan berakhir dengan sesuatu seperti:Informasi dukungan browser lebih lanjut di sini .
sumber
-webkit-filter: grayscale(100%);
lalu ini:-webkit-filter: grayscale(0);
untuk menghapusnya.Untuk Firefox Anda tidak perlu membuat file filter.svg, Anda dapat menggunakan skema URI data .
Mengambil kode css dari jawaban pertama memberi:
Berhati-hatilah untuk mengganti string "utf-8" dengan penyandian file Anda.
Metode ini harus lebih cepat daripada yang lain karena browser tidak perlu melakukan permintaan HTTP kedua.
sumber
Pembaruan: Saya menjadikan ini sebagai repo GitHub lengkap, termasuk JavaScript polyfill untuk IE10 dan IE11: https://github.com/karlhorky/gray
Saya awalnya menggunakan jawaban SalmanPK , tetapi kemudian membuat variasi di bawah ini untuk menghilangkan permintaan HTTP tambahan yang diperlukan untuk file SVG. SVG inline berfungsi di Firefox versi 10 dan di atasnya, dan versi yang lebih rendah dari 10 tidak lagi mencakup bahkan 1% dari pasar browser global.
Sejak itu saya terus memperbarui solusi di posting blog ini , menambahkan dukungan untuk memudar kembali ke warna, dukungan IE 10/11 dengan SVG, dan sebagian abu-abu dalam demo.
sumber
Jika Anda dapat menggunakan JavaScript, maka skrip ini mungkin yang Anda cari. Ini berfungsi lintas browser dan berfungsi dengan baik untuk saya sejauh ini. Anda tidak dapat menggunakannya dengan gambar yang diambil dari domain yang berbeda.
http://james.padolsey.com/demos/grayscale/
sumber
Baru saja mendapat masalah yang sama hari ini. Saya awalnya menggunakan solusi SalmanPK tetapi menemukan efek yang berbeda antara FF dan browser lainnya. Itu karena matriks konversi hanya berfungsi pada kecerahan saja, bukan luminositas seperti filter di Chrome / IE. Yang mengejutkan saya, saya telah menemukan bahwa solusi alternatif dan lebih sederhana di SVG juga berfungsi di FF4 + dan menghasilkan hasil yang lebih baik:
Dengan css:
Satu lagi peringatan adalah bahwa IE10 tidak mendukung "filter: grey:" dalam mode standar yang sesuai lagi, jadi perlu mode kompatibilitas beralih di header untuk bekerja:
sumber
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0\'/></filter></svg>#grayscale");
Cara termudah untuk mencapai skala abu-abu dengan CSS secara eksklusif adalah melalui
filter
properti.Properti masih belum sepenuhnya didukung dan masih membutuhkan
-webkit-filter
properti untuk dukungan di semua browser.sumber
Tidak terlihat seperti itu mungkin (belum), bahkan dengan CSS3 atau properti milik
-webkit-
atau-moz-
CSS.Namun, saya menemukan posting ini dari Juni lalu yang menggunakan filter SVG pada HTML. Tidak tersedia di peramban apa pun saat ini (demo mengisyaratkan pembuatan WebKit khusus), tetapi sangat mengesankan sebagai bukti konsep.
sumber
Untuk orang-orang yang bertanya tentang dukungan IE10 + yang diabaikan dalam jawaban lain, periksa bagian CSS ini:
Diterapkan pada markup ini:
Untuk demo lainnya, periksa bagian IE3 CSS testdrive dan blog IE lama ini http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx
sumber
Di Internet Explorer gunakan properti filter.
Di webkit dan Firefox saat ini tidak ada cara untuk menghapus gambar hanya dengan CSS. jadi Anda harus menggunakan kanvas atau SVG untuk solusi sisi klien.
Tapi saya pikir menggunakan SVG lebih elegan. lihat posting blog saya untuk solusi SVG yang berfungsi untuk Firefox dan webkit: http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html
Dan sebenarnya karena SVG adalah HTML solusinya adalah murni html + css :-)
sumber
Cara baru untuk melakukan ini telah tersedia untuk beberapa waktu sekarang di browser modern.
background-blend-mode memungkinkan Anda mendapatkan beberapa efek menarik, dan salah satunya adalah konversi skala abu-abu
Luminositas nilai , yang diatur pada latar belakang putih, memungkinkannya. (arahkan kursor untuk melihatnya berwarna abu-abu)
Luminositas diambil dari gambar, warnanya diambil dari latar belakang. Karena selalu putih, tidak ada warna.
Tetapi memungkinkan lebih banyak.
Anda dapat menganimasikan pengaturan efek 3 layer. Yang pertama akan menjadi gambar, dan yang kedua akan menjadi gradien putih-hitam. Jika Anda menerapkan mode campuran multiply pada ini, Anda akan mendapatkan hasil putih seperti sebelumnya pada bagian putih, tetapi gambar asli pada bagian hitam (dikalikan dengan putih memberi putih, mengalikan dengan hitam tidak berpengaruh.)
Pada bagian putih gradien, Anda mendapatkan efek yang sama seperti sebelumnya. Pada bagian hitam dari gradien, Anda memadukan gambar itu sendiri, dan hasilnya adalah gambar yang tidak dimodifikasi.
Sekarang, yang diperlukan hanyalah menggerakkan gradien untuk mendapatkan efek dinamis ini: (arahkan kursor untuk melihatnya dalam warna)
referensi
matriks kompatibilitas
sumber
img
tag digunakan untuk gambar tidakbackground: url()
sumber
Mungkin cara ini membantu Anda
w3schools.org
sumber
Sebenarnya lebih mudah melakukannya dengan IE jika saya ingat benar menggunakan properti CSS berpemilik. Coba ini
FILTER: Gray
dari http://www.ssi-developer.net/css/visual-filters.shtmlMetode oleh Ax hanya membuat gambar transparan dan memiliki latar belakang hitam di belakangnya. Saya yakin Anda bisa berdebat ini abu-abu.
Meskipun Anda tidak ingin menggunakan Javascript, saya pikir Anda harus menggunakannya. Anda juga dapat menggunakan bahasa sisi server untuk melakukannya.
sumber
filter: gray
hadir di Internet Explorer sejak Versi 4 . Mereka telah mengambil banyak omong kosong untuk produk mereka - benar! - tetapi mereka benar-benar terdepan dalam hal iniJika Anda ingin menggunakan Javascript, maka Anda dapat menggunakan kanvas untuk mengubah gambar menjadi skala abu-abu. Karena Firefox dan Safari mendukung
<canvas>
, seharusnya berfungsi.Jadi saya mencari Google "kanvas abu-abu", dan hasil pertama adalah http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html yang tampaknya berfungsi.
sumber
dukungan untuk filter CSS asli di webkit telah ditambahkan dari versi saat ini 19.0.1084.46
jadi -webkit-filter: grayscale (1) akan berfungsi dan mana yang lebih mudah daripada pendekatan SVG untuk webkit ...
sumber
Inilah mixin untuk KURANG yang memungkinkan Anda memilih opacity. Isi variabel Anda sendiri untuk CSS biasa dengan persentase berbeda.
Petunjuk rapi di sini , ia menggunakan tipe saturate untuk matriks sehingga Anda tidak perlu melakukan hal lain untuk mengubah persentase.
Kemudian gunakan:
sumber
Anda tidak perlu menggunakan banyak awalan untuk penggunaan penuh, karena jika Anda memilih awalan untuk firefox lama, Anda tidak perlu menggunakan awalan untuk firefox baru.
Jadi untuk penggunaan penuh, cukup gunakan kode ini:
sumber
Sebagai pelengkap jawaban orang lain, dimungkinkan untuk mendesaturasi gambar setengah jalan di FF tanpa sakit kepala matriks SVG :
Di mana
$v
antara0
dan1
. Ini setara denganfilter:grayscale(50%);
.Contoh langsung:
Tampilkan cuplikan kode
Referensi tentang MDN
sumber
Berdasarkan jawaban robertc :
Untuk mendapatkan konversi yang tepat dari gambar berwarna ke gambar abu-abu alih-alih menggunakan matriks seperti ini:
Anda harus menggunakan matriks konversi seperti ini:
Ini harus bekerja dengan baik untuk semua jenis gambar berdasarkan model RGBA (red-green-blue-alpha).
Untuk informasi lebih lanjut mengapa Anda harus menggunakan matriks saya memposting lebih mungkin bahwa robertc memeriksa tautan berikut:
sumber
0.2126 0.7152 0.0722 0 0
tampaknya setara dengan<fecolormatrix type="saturate" values="0">
Salah satu solusi yang mengerikan tetapi bisa diterapkan: render gambar menggunakan objek Flash, yang kemudian memberi Anda semua transformasi yang dimungkinkan dalam Flash.
Jika pengguna Anda menggunakan browser yang canggih dan jika Firefox 3.5 dan Safari 4 mendukungnya (saya tidak tahu apakah itu / akan), Anda dapat menyesuaikan atribut profil warna CSS dari gambar, mengaturnya ke ICC skala abu-abu URL profil. Tapi itu banyak jika!
sumber
menjadi Alternatif untuk peramban yang lebih lama bisa menggunakan topeng yang diproduksi oleh pseudo-elements atau inline tag.
Penentuan posisi absolut melayang img (atau area teks yang tidak perlu klik atau seleksi) dapat meniru efek skala warna, melalui rgba () atau png translucide .
Itu tidak akan memberikan satu skala warna tunggal, tetapi akan menaungi warna di luar jangkauan.
uji pada pena kode dengan 10 warna berbeda melalui elemen semu, terakhir berwarna abu-abu. http://codepen.io/gcyrillus/pen/nqpDd (muat ulang untuk beralih ke gambar lain)
sumber
Anda dapat menggunakan salah satu fungsi jFunc - gunakan fungsi "jFunc_CanvasFilterGrayscale" http://jfunc.com/jFunc-functions.aspx
sumber
Coba plugin jquery ini. Meskipun, ini bukan solusi HTML dan CSS murni, tetapi ini adalah cara malas untuk mencapai apa yang Anda inginkan. Anda dapat menyesuaikan skala abu-abu agar sesuai dengan penggunaan Anda. Gunakan sebagai berikut:
Ada demo interaktif . Anda bisa bermain-main dengannya.
Lihat dokumentasi penggunaannya, itu sangat sederhana. docs
sumber
Untuk skala abu-abu sebagai persentase di Firefox, gunakan filter saturate : (cari 'saturate')
sumber
Jika Anda, atau orang lain yang menghadapi masalah serupa di masa depan terbuka untuk PHP. (Saya tahu Anda mengatakan HTML / CSS, tapi mungkin Anda sudah menggunakan PHP di backend) Berikut adalah solusi PHP:
Saya mendapatkannya dari pustaka GD GD dan menambahkan beberapa variabel untuk mengotomatiskan proses ...
sumber