新增第195个小实例：纯CSS实现网站置灰

2022-12-01 20:54:37 +08:00 · 2022-12-01 20:54:37 +08:00 · e18f8b48b8
parent d3c02a3a9f
commit e18f8b48b8
3 changed files with 41 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -202,6 +202,7 @@
 192. HTML5+CSS3+JS小实例：过山车文字动画特效
 193. HTML5+CSS3+JS小实例：可拖拽排序的人物列表
 194. HTML5+CSS3+JS小实例：自适应瀑布流布局
+195. HTML5+CSS3小实例：纯CSS实现网站置灰

 #### 赞赏作者
 ![image](https://gitee.com/wyanhui02/html_css_demo/raw/master/images/%E8%B5%9E%E8%B5%8F%E4%BD%9C%E8%80%85/%E8%B5%9E%E8%B5%8F%E7%A0%81.jpg)
--- a/code/195/195.css
+++ b/code/195/195.css
@ -0,0 +1,24 @@
+*{
+    margin: 0;
+    padding: 0;
+    /* 灰度滤镜 */
+    filter: grayscale(1);
+    /* 兼容多种浏览器 */
+    -webkit-filter: grayscale(1);
+    -moz-filter: grayscale(1);
+    -ms-filter: grayscale(1);
+    -o-filter: grayscale(1);
+}
+body{
+    height: 100vh;
+    width: 100vw;
+    background: url('/images/op1/1.jpg') no-repeat;
+    background-size: cover;
+    background-position: center;
+}
+h1{
+    width: 100%;
+    background-color: rgba(255, 255, 255, 0.6);
+    text-align: center;
+    line-height: 80px;
+}
--- a/code/195/195.html
+++ b/code/195/195.html
@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
+
+    <title>纯CSS实现网站置灰</title>
+    <link rel="stylesheet" href="195.css">
+</head>
+
+<body>
+    <h1>有时候，为了缅怀一些人和事（比如：汶川地震、伟人逝世……），我们需要把网站变成灰色。</h1>
+</body>
+
+</html>