YouTube:https://www.youtube.com/c/xugaoxiang;Bilibili: 迷途小书童的Note;微信公众号: Dev_Club

网站变灰如何实现?

IT技巧 迷途小书童 0评论

软硬件环境

  • nginx
  • vps
  • css

视频看这里

此处是youtube的播放链接,需要科学上网。喜欢我的视频,请记得订阅我的频道,打开旁边的小铃铛,点赞并分享,感谢您的支持。

前言

4月4日,是全国哀悼日,为了纪念因为这个新冠肺炎死去的同胞们。这一天,无论是手机App还是电脑上的网站,基本上都是灰色显示,下图是B站的首页

gray

如何让网站变灰

这边我准备了一个域名xugaoxiang.tk和一个vps,事先已经设置好了dns,在vps通过命令

sudo apt install nginx

安装了nginx服务器,将事先准备好的一张彩色图片test.jpg上传到/usr/share/nginx/html,并修改index.html文件

<!DOCTYPE html>
<html>
<head>
<title>Welcome to xugaoxiang.tk!</title>
<style>
    body {
        width: 35em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }

</style>
</head>
<body>
<h1>Welcome to nginx!</h1>
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.</p>

<p>For online documentation and support please refer to
<a href="http://nginx.org/">nginx.org</a>.<br/>
Commercial support is available at
<a href="http://nginx.com/">nginx.com</a>.</p>

<p><em>Thank you for using nginx.</em></p>
<img src="test.jpg",alt="test image",width=800px, height=600px>
</body>
</html>

修改完后,在浏览器中访问xugaoxiang.tk

gray

方法一

head中添加html标签的样式

html {
    filter: progid:DxImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(100%);
}

整个index.html文件是这样的

<!DOCTYPE html>
<html>
<head>
<title>Welcome to xugaoxiang.tk!</title>
<style>
    body {
        width: 35em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }

    html {
    filter: progid:DxImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(100%);
    }

</style>
</head>
<body>
<h1>Welcome to nginx!</h1>
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.</p>

<p>For online documentation and support please refer to
<a href="http://nginx.org/">nginx.org</a>.<br/>
Commercial support is available at
<a href="http://nginx.com/">nginx.com</a>.</p>

<p><em>Thank you for using nginx.</em></p>
<img src="test.jpg",alt="test image",width=800px, height=600px>
</body>
</html>

接着刷新浏览器,查看效果

gray

可以看到,彩色的图片已经变灰了

方法二

html标签中添加样式,完整的index.html是这样的

<!DOCTYPE html>
<html style="filter: progid:DxImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);">
<head>
<title>Welcome to xugaoxiang.tk!</title>
<style>
    body {
        width: 35em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }

</style>
</head>
<body>
<h1>Welcome to nginx!</h1>
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.</p>

<p>For online documentation and support please refer to
<a href="http://nginx.org/">nginx.org</a>.<br/>
Commercial support is available at
<a href="http://nginx.com/">nginx.com</a>.</p>

<p><em>Thank you for using nginx.</em></p>
<img src="test.jpg",alt="test image",width=800px, height=600px>
</body>
</html>

方法三

将样式写成独立的css文件

gray.css文件内容

html {
    filter: progid:DxImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(100%);
}

index.html文件内容

<!DOCTYPE html>
<html style="filter: progid:DxImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);">
<head>
<title>Welcome to xugaoxiang.tk!</title>
<link rel="stylesheet" type="text/css" href="gray.css">
<style>
    body {
        width: 35em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }

</style>
</head>
<body>
<h1>Welcome to nginx!</h1>
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.</p>

<p>For online documentation and support please refer to
<a href="http://nginx.org/">nginx.org</a>.<br/>
Commercial support is available at
<a href="http://nginx.com/">nginx.com</a>.</p>

<p><em>Thank you for using nginx.</em></p>
<img src="test.jpg",alt="test image",width=800px, height=600px>
</body>
</html>

clear cache浏览器插件

它可以帮你清除浏览器的缓存,查看网页效果非常方便,而且不会因为缓存而出错,下载地址 https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn

喜欢 (1)
发表我的评论
取消评论

表情