CSS mencapai kesan skala kelabu imej dan serasi dengan pelbagai pelayar

Bab ini memperkenalkan anda kepada kaedah menggunakan CSS untuk mencapai kesan skala kelabu imej Ia serasi dengan pelbagai pelayar seperti 360 Browser. Ia mempunyai nilai rujukan tertentu Rakan-rakan yang memerlukan boleh merujuk kepadanya.

CSS mencapai kesan skala kelabu imej dengan menjadikan imej warna kelihatan kelabu melalui gaya CSS, yang bersamaan dengan melaraskan mod warna imej kepada skala kelabu boleh mencapai kesan skala kelabu melalui kaedah berikut.

Kaedah 1. Penapis IE

img { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } //标准写法
img { filter:Gray; } //简写

Pelayar siri IE semuanya menyokong atribut penapis IE ini, pelayar bukan IE Pelayan melakukan tidak menyokongnya.

Kaedah 2. Penapis CSS3

img { -webkit-filter: grayscale(100%); }

Penapis CSS3 belum lagi menjadi atribut standard dan pada masa ini hanya Google Disokong oleh penyemak imbas Chrome, tetapi tidak disokong oleh penyemak imbas lain

Kesan skala kelabu CSS boleh memudahkan anda melaksanakan beberapa kesan khas pada halaman web Adakah anda masih ingat bahawa banyak halaman web domestik bertukar kelabu semalaman sebagai memperingati 5.12. gempa bumi? Ia boleh dicapai dengan mudah dengan menambahkan gaya berikut pada tapak web:

html { filter:Gray; -webkit-filter: grayscale(100%); }

Mesti ada yang mengatakan bahawa walaupun kesan skala kelabu CSS adalah baik, ia tidak boleh serasi dengan semua penyemak imbas saya buat? Jika anda tidak boleh melakukan apa-apa dengan CSS, anda pasti akan terfikir untuk menggunakan JS untuk mencapainya Di sini saya cadangkan pemalam kesan skala kelabu JS:

grayscale.js.

Penggunaan:

//引入插件
<script type="text/javascript" src="grayscale.js"></script>

//调用插件
<script type="text/javascript">
    window.onload = function(){
        var el = document.getElementById( &#39;body&#39; );
        grayscale( el );
    };
</script>

serasi dengan semua penyemak imbas Selepas pelaksanaan, banyak gaya sebaris akan ditambahkan pada elemen jika anda tidak mempunyai keperluan yang tinggi keserasian, adalah disyorkan untuk menggunakan CSS untuk mencapai kesan darjah skala kelabu.