悼念：黑白素色网页背景设置教程

最新推荐文章于 2022-12-23 14:59:18 发布

于小九

最新推荐文章于 2022-12-23 14:59:18 发布

阅读量774

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/xuanziran/article/details/105306835

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

深切哀悼在本次抗击新冠肺炎疫情斗争中牺牲的烈士与逝世的同胞们，愿逝者安息，愿生者奋发，愿祖国昌盛。

2020年4月4日

愿逝者安息，愿生者奋发，愿祖国昌盛。
在这个沉痛的日子里，希望我们能够尽上一点绵薄之力。

1.网站中于 <head></head> 标签中加入如下样式使我们的网站修改为素色：

<style type="text/css">
/*设置整个网站全局为素色*/
html {
-webkit-filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(graysale=1);
}
</style>

2.下面是使用前后的效果图：

使用前：
使用后：

最后附上完整样式：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<style type="text/css">
/*设置整个网站全局为素色*/
html {
height: 100%;
width: 100%;
-webkit-filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(graysale=1);
}

body {
height: 100%;
width: 100%;
}

.bg {
height: 100%;
width: 100%;
background: url("bg.jpg") no-repeat ;
overflow: hidden;
background-size: cover;
/* background-size: 100%; */
}
</style>
</head>
<body>
<div class="bg">
<!--div style="height:30px; width:30px; background:green;"></div><br/>
<font color="red">Text</font-->
</div>
</body>
</html>