Bagaimana untuk menukar imej kepada kelabu menggunakan gaya css-tutorial css-php.cn

Bagaimana untuk menukar imej kepada kelabu menggunakan gaya css

青灯夜游

Lepaskan： 2022-01-20 14:43:58

asal

15724 orang telah melayarinya

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.

Bagaimana untuk menukar imej kepada kelabu menggunakan gaya css

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>

Salin selepas log masuk

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!