使用 HTML/CSS 将图片转换为灰度图像

2025年3月25日 | 1 分钟阅读

在本文中，我们将介绍如何创建图像的灰度版本。

拥有彩色图像，目标是使用 CSS 属性将其转换为灰度。要将图像转换为灰度，我们主要使用 CSS filter 属性。filter 功能主要用于改变图片的视觉外观。

语法

第一种方法

要将图像转换为灰度，请应用 filter grayscale(100%)。

<!DOCTYPE html>
<html>
	<head>
		<title>Abc...</title>
		<style>
			img {
				-webkit-filter: grayscale(100%);
				filter: grayscale(100%);
			}
			h1 {
				color:red;
			}
		</style>
	</head>
	<body>
		<center>
		<h1>tpointtech</h1>
		<h2>Grayscale Image</h2>
		<img src=
"https://images.tpointtech.com/blog/images/when-was-google-created.png"
		width="300px" height="150px" alt="filter applied" />
		</center>
	</body>
</html>

输出

Convert an Image into Grayscale Image using HTML/CSS

第二种方法

<!DOCTYPE html>
<html>
	<head>
		<title> Abc...</title>
		<style>
			img {
				-webkit-filter: grayscale(1);
				filter: grayscale(1);
			}
			img:hover {
			-webkit-filter: grayscale(0);
			filter: none;
			}
			h1 {
				color:red;
			}
		</style>
	</head>
	<body>
		<center>
		<h1>tpointtech</h1>
		<h2>Grayscale Image</h2>
		<img src=
"https://images.tpointtech.com/blog/images/when-was-google-created.png"
		width="300px" height="150px" alt="filter applied" />
		</center>
	</body>
</html>

输出

下一个主题使用 display 属性在 HTML 中隐藏或显示元素

使用 HTML/CSS 将图片转换为灰度图像

第一种方法

第二种方法

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

使用 HTML/CSS 将图片转换为灰度图像

第一种方法

第二种方法

相关帖子

如何在 HTML 中嵌入 YouTube 视频

HTML Value

HTML 基本标签

如何在 HTML 中使用 Image 标签

HTML 货币格式

HTML 背景图片

HTML 工具提示

HTML 中的 UL 标签

HTML 中的 Hspace 和 Vspace

如何在 HTML 中添加社交媒体图标

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器