Bagaimana untuk menukar gambar berwarna kepada gambar hitam putih dalam css3-tutorial css-php.cn

Bagaimana untuk menukar gambar berwarna kepada gambar hitam putih dalam css3

青灯夜游

Lepaskan： 2021-11-09 15:55:42

asal

2553 orang telah melayarinya

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(%). Format sintaks khusus ialah "img {filter:grayscale (100%)}".

Bagaimana untuk menukar gambar berwarna kepada gambar hitam putih dalam css3

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 Bagaimana untuk menukar gambar berwarna kepada gambar hitam putih dalam css3 ). 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(%)

Contoh:

<!DOCTYPE html>
<html>
	<head>
		<style>
			.img{filter:grayscale(100%)}
		</style>
	</head>

	<body>
		<img  src="img/1.jpg"    style="max-width:90%" / alt="Bagaimana untuk menukar gambar berwarna kepada gambar hitam putih dalam css3" >
		<img  src="img/1.jpg"    style="max-width:90%" class="img"/ alt="Bagaimana untuk menukar gambar berwarna kepada gambar hitam putih dalam css3" >
	</body>
</html>

Salin selepas log masuk

Rendering:

Bagaimana untuk menukar gambar berwarna kepada gambar hitam putih dalam css3

(Mempelajari perkongsian video:

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!