Rumah > Artikel > hujung hadapan web > Bagaimana untuk menukar imej kepada kelabu menggunakan gaya css

Bagaimana untuk menukar imej kepada kelabu menggunakan gaya css

青灯夜游asal: 2022-01-20 14:43:5815675semak imbas

Dalam CSS, anda boleh menggunakan atribut penapis untuk menukar imej kepada kelabu Atribut ini boleh menambah kesan penapis pada imej Anda hanya perlu menambah "penapis: skala kelabu %); gaya kepada elemen imej Ini akan menetapkan imej kepada kelabu.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Dalam CSS, anda boleh menggunakan atribut penapis untuk menukar imej kepada kelabu. Atribut

penapis mentakrifkan kesan visual unsur (biasanya Bagaimana untuk menukar imej kepada kelabu menggunakan gaya css ), iaitu, menambahkan kesan penapis pada imej, seperti kabur dan tepu.

Apabila nilai atribut penapis ialah skala kelabu(%), imej boleh ditukar kepada imej 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;

Kod sampel:

<!DOCTYPE html>
<html>
	<head>
		<style>
			.img1 {
				-webkit-filter: grayscale(100%);
				/* Chrome, Safari, Opera */
				filter: grayscale(50%);
			}
			.img2 {
				-webkit-filter: grayscale(100%);
				/* Chrome, Safari, Opera */
				filter: grayscale(70%);
			}
			.img3 {
				-webkit-filter: grayscale(100%);
				/* Chrome, Safari, Opera */
				filter: grayscale(100%);
			}
		</style>
	</head>
	<body>

		<p>设置图片的灰度:</p>

		<img  src="img/1.jpg"    style="max-width:90%" alt="Bagaimana untuk menukar imej kepada kelabu menggunakan gaya css" >
		<img  class="img1" src="img/1.jpg"    style="max-width:90%" alt="Bagaimana untuk menukar imej kepada kelabu menggunakan gaya css" >
		<img  class="img2" src="img/1.jpg"    style="max-width:90%" alt="Bagaimana untuk menukar imej kepada kelabu menggunakan gaya css" >
		<img  class="img3" src="img/1.jpg"    style="max-width:90%" alt="Bagaimana untuk menukar imej kepada kelabu menggunakan gaya css" >
	</body>
</html>

Bagaimana untuk menukar imej kepada kelabu menggunakan gaya css

(Pembelajaran perkongsian video: tutorial video css )

Atas ialah kandungan terperinci Bagaimana untuk menukar imej kepada kelabu menggunakan gaya css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk mengurangkan ketelusan latar belakang dalam cssArtikel seterusnya：Bagaimana untuk mengurangkan ketelusan latar belakang dalam css

Artikel berkaitan

Lihat lagi