📌  相关文章
📜  CSS | invert()函数(1)

📅  最后修改于: 2023-12-03 15:30:09.413000             🧑  作者: Mango

CSS | invert()函数

CSS中的invert()函数是CSS滤镜功能中的一个。它可以反转所选元素的颜色，使背景变成前景，前景变成背景。invert()函数的参数值在0和1之间，0表示不反转，1表示完全反转。

语法
filter: invert(value);

其中，value的取值范围为0和1之间。

实例

下面是一个比较简单的实例，通过invert()函数达到反转元素颜色的效果：

<!DOCTYPE html>
<html>
<head>
	<style>
		body {
			background-color: #000000;
			color: #ffffff;
		}

		.inverted {
			filter: invert(1);
		}
	</style>
</head>
<body>
	<h1>这是一段普通的文字</h1>
	<h2 class="inverted">反转颜色的文字</h2>
</body>
</html>

在上面的代码中，我们通过CSS定义了一个类名inverted，并且使用了invert()函数来反转该元素的颜色。可以看到，该类名的h2元素反转了颜色。

用途

invert()函数可以用于改变页面的主题颜色，在不需要更改HTML的情况下实现反转颜色的效果。它可以应用于任何具有颜色的元素，如文本、背景、边框和渐变等。

兼容性

invert()函数在大部分浏览器中已经得到了支持，包括Chrome、Firefox、Safari和Opera等。不过，在Internet Explorer浏览器中，该函数并不支持。

注意事项

使用invert()函数需要注意以下几点：

  • 反转颜色的过程将会使纯色的元素变得不可见。比如，如果一个白色文本被反转成黑色，它将会被黑色背景所隐藏。
  • 如果一个半透明的元素被反转，其透明度也将被反转所影响。因此，在应用该函数的时候，需要谨慎考虑它对元素的透明度变化是否会对视觉效果造成明显的影响。
参考资料