灰にマストスカル「グレー」フライ灰を笑います

2020年4月4日、その日は特別な日です。まあ、あなたのサイトは淡色表示にする方法であなたと共有し、今日私たちを与えます。

I.はじめに

私たちは、サイト全体がグレー表示されている配置する必要があり、多くの場合、我々は、このようないくつかの重要な瞬間として念頭に置く必要があります。私たちは、サイト全体がグレー表示されている達成するためにどのように見てみましょう、多くのサイトが灰色で表示されます。

二つ、CSS3フィルタ(フィルタ)特性

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

  属性は、フィルタエレメント(通常<IMG>)視覚​​効果(:ファジィと彩度など)を定義します。

グレースケール():

 

画像はグレースケールに変換します。値は、変換比を規定するものです。100%の値は完全にグレースケール画像に変換され、画像値は0%無変化です。0%〜100%の間の値、線形乗算器の効果。設定されていない場合、デフォルト値は0です。

第三に、の原則を達成するために

IEブラウザの下で、これは私たちがすべてを知って、グレースケールフィルタを追加することです。他のブラウザは、一見キャンバスを使用するgetImageData方法、および、各画素の階調変換を行います。

360グレイは効果サイトを見て

 

ここでは、私が実際に結果でデモを見て書いたものです:あなたが見ることができ、画像、CSSスタイル用のWeb、ビデオは淡色表示されています。

<!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>

 

あなたのサイトは淡色表示の上に書かれた面を作る方法についてのよく方法は、私はあなたに有益なコメント好きなアーティストのように指すかどうかを学習するために、この論文の内容や仕事は、いくつかの助けをもたらすことができることを願っています!^ _ ^  

公開された104元の記事 ウォンの賞賛150 ・は 40000 +を見て

おすすめ

転載: blog.csdn.net/tanqingfu1/article/details/105322158