hujung hadapan web
tutorial css
Bagaimana untuk menukar gambar berwarna kepada gambar hitam putih dalam css3
Bagaimana untuk menukar gambar berwarna kepada gambar hitam putih dalam css3
Nov 09, 2021 pm 03:53 PMDalam CSS3, anda boleh menggunakan atribut penapis untuk menukar imej berwarna kepada imej hitam dan putih Anda hanya perlu menetapkan nilai atribut ini kepada "skala kelabu(%). Format sintaks khusus ialah "img {filter:grayscale (100%)}".
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.
Dalam CSS3, anda boleh menggunakan atribut penapis untuk menukar imej berwarna kepada imej hitam dan putih Anda hanya perlu menetapkan nilai atribut ini kepada "skala kelabu(%)",
<.> Sifat mentakrifkan kesan visual (cth. kabur, tepu, skala kelabu) unsur (biasanya 
). filter
: Tukar imej kepada skala kelabu. Nilai mentakrifkan skala penukaran. Jika nilainya ialah 100%, imej ditukar sepenuhnya kepada skala kelabu dan jika nilainya ialah 0%, imej itu akan kekal tidak berubah. Nilai antara 0% dan 100% adalah pengganda linear kesan. Jika tidak ditetapkan, nilai lalai kepada 0. grayscale(%)
<!DOCTYPE html>
<html>
<head>
<style>
.img{filter:grayscale(100%)}
</style>
</head>
<body>
<img src="/static/imghw/default1.png" data-src="img/1.jpg" class="lazy" style="max-width:90%" / alt="Bagaimana untuk menukar gambar berwarna kepada gambar hitam putih dalam css3" >
<img class="img lazy" src="/static/imghw/default1.png" data-src="img/1.jpg" style="max-width:90%" / alt="Bagaimana untuk menukar gambar berwarna kepada gambar hitam putih dalam css3" >
</body>
</html>
tutorial video css)
Atas ialah kandungan terperinci Bagaimana untuk menukar gambar berwarna kepada gambar hitam putih dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Artikel Panas
Alat panas Tag
Artikel Panas
Tag artikel panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Bagaimana untuk menyelesaikan masalah menyimpan gambar secara automatik semasa menerbitkan di Xiaohongshu? Di manakah imej yang disimpan secara automatik semasa menyiarkan?
Mar 22, 2024 am 08:06 AM
Bagaimana untuk menyelesaikan masalah menyimpan gambar secara automatik semasa menerbitkan di Xiaohongshu? Di manakah imej yang disimpan secara automatik semasa menyiarkan?
Bagaimana untuk menyiarkan gambar dalam ulasan TikTok? Di manakah pintu masuk ke gambar di ruang komen?
Mar 21, 2024 pm 09:12 PM
Bagaimana untuk menyiarkan gambar dalam ulasan TikTok? Di manakah pintu masuk ke gambar di ruang komen?
6 Cara Menjadikan Gambar Lebih Tajam pada iPhone
Mar 04, 2024 pm 06:25 PM
6 Cara Menjadikan Gambar Lebih Tajam pada iPhone
Cara membuat gambar ppt muncul satu persatu
Mar 25, 2024 pm 04:00 PM
Cara membuat gambar ppt muncul satu persatu
Bagaimana untuk menukar dokumen pdf ke dalam imej jpg dengan Foxit PDF Reader - Bagaimana untuk menukar dokumen pdf ke dalam imej jpg dengan Foxit PDF Reader
Mar 04, 2024 pm 05:49 PM
Bagaimana untuk menukar dokumen pdf ke dalam imej jpg dengan Foxit PDF Reader - Bagaimana untuk menukar dokumen pdf ke dalam imej jpg dengan Foxit PDF Reader
Bagaimana untuk menggunakan JavaScript untuk melaksanakan fungsi seret dan zum imej?
Oct 27, 2023 am 09:39 AM
Bagaimana untuk menggunakan JavaScript untuk melaksanakan fungsi seret dan zum imej?
Panduan Amalan Pemprosesan Imej C++: Melaksanakan Kesan dan Penapis Khas Imej
Nov 27, 2023 am 11:40 AM
Panduan Amalan Pemprosesan Imej C++: Melaksanakan Kesan dan Penapis Khas Imej
Cara menggunakan HTML, CSS dan jQuery untuk melaksanakan fungsi lanjutan penggabungan dan paparan imej
Oct 27, 2023 pm 04:36 PM
Cara menggunakan HTML, CSS dan jQuery untuk melaksanakan fungsi lanjutan penggabungan dan paparan imej
