谈笑间樯橹"灰"飞烟灭

2024-03-02 16:59:22

2020年04月04日，这一天是一个特殊的日子。好了今天就给大家分享一下关于如何让网站变灰。

一、前言

在很多时候我们需要把整个网站变灰，比如一些需要我们铭记重大的时刻。看到很多网站都是灰色，来看看网站是如何实现整体变灰的。

二、CSS3 filter(滤镜) 属性

html{
   -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。

grayscale()：

将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0。

三、实现原理

IE浏览器下是添加灰度滤镜，这个大家都懂的。其他浏览器貌似使用Canvas中的getImageData方法，然后对每个像素点进行灰度转换。

来看看360网站的灰色效果

下面是我实际写的demo 来看一下效果：可以看到，网页中的图片、css样式、视频都已经变灰。

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>网站内容变灰</title>
	<style type="text/css">
		.image {
			filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
			-webkit-filter: grayscale(100%);
		}
		<!-- html {  
        -webkit-filter: grayscale(100%);  
        -moz-filter: grayscale(100%);  
        -ms-filter: grayscale(100%);  
        -o-filter: grayscale(100%);  
        filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);  
        _filter:none;  
	   } -->
	   body { 
		background-color: #c5c4c4;
		filter:gray();

	  }
	</style> 
	
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>网站内容变灰 <span>Clipping gif to text</span></h1>
		</header>
		<p>好久到时发生交电话费的</p>
		<image  src="related/1.jpg" class="image" style="width:25%"/>
	</div>
</body>
</html>

好了以上写的关于如何让网站变灰方面的方法，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果对你有用点赞评论收藏加关注^_^

码农公寓

一 、前言

二、CSS3 filter(滤镜) 属性

三、实现原理

相关文章

一、前言