侧边栏壁纸
  • 累计撰写 4 篇文章
  • 累计收到 0 条评论

通过CSS代码实现网站变成灰色的方法

admin
2021-04-06 / 0 评论 / 16 阅读 / 正在检测是否收录...

<div class="post-content">
<h2>一、通过对css文件添加代码来实现</h2><p>对调用的css文件里添加一下css代码,可以实现网页变黑白,也就是网站变灰。</p><p>方法1</p><pre><span class="hljs-selector-tag">html</span> {
<span class="hljs-attribute">filter</span>: progid:DXImageTransform.Microsoft.<span class="hljs-built_in">BasicImage</span>(grayscale=<span class="hljs-number">1</span>);
<span class="hljs-attribute">-webkit-filter</span>: <span class="hljs-built_in">grayscale</span>(<span class="hljs-number">100%</span>);
}
</pre><p>方法2</p><pre><span class="hljs-selector-tag">html</span> {
<span class="hljs-attribute">-webkit-filter</span>: <span class="hljs-built_in">grayscale</span>(<span class="hljs-number">100%</span>);
<span class="hljs-attribute">-moz-filter</span>: <span class="hljs-built_in">grayscale</span>(<span class="hljs-number">100%</span>);
<span class="hljs-attribute">-ms-filter</span>: <span class="hljs-built_in">grayscale</span>(<span class="hljs-number">100%</span>);
<span class="hljs-attribute">-o-filter</span>: <span class="hljs-built_in">grayscale</span>(<span class="hljs-number">100%</span>);
<span class="hljs-attribute">filter</span>:progid:DXImageTransform.Microsoft.<span class="hljs-built_in">BasicImage</span>(grayscale=<span class="hljs-number">1</span>);
<span class="hljs-attribute">_filter</span>:none;
}
</pre><h2>二、在网页的<head>标签内加入以下代码</h2><p>如果你不想改动CSS文件,你可以通过在网页头部中的<head>标签内部加入内联CSS代码的形式实现网站网页变灰</p><pre><span class="hljs-tag"><<span class="hljs-name">style</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/css"</span>></span><span class="css">
<span class="hljs-selector-tag">html</span> {
<span class="hljs-attribute">filter</span>: progid:DXImageTransform.Microsoft.<span class="hljs-built_in">BasicImage</span>(grayscale=<span class="hljs-number">1</span>);
<span class="hljs-attribute">-webkit-filter</span>: <span class="hljs-built_in">grayscale</span>(<span class="hljs-number">100%</span>);}
</span><span class="hljs-tag"></<span class="hljs-name">style</span>></span>
</pre><h2>三、修改<html>标签加入内联样式</h2><p>如里上面的两种方式都不喜欢,可以通过修改<html>标签,以加入内联样式的方法,达到网页变灰的效果</p><pre><span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);"</span>></span>
</pre><h2>四、最终我采用的代码</h2><pre><span class="hljs-selector-tag">body</span> *{
<span class="hljs-attribute">-webkit-filter</span>: <span class="hljs-built_in">grayscale</span>(<span class="hljs-number">100%</span>); <span class="hljs-comment">/ webkit /</span>
<span class="hljs-attribute">-moz-filter</span>: <span class="hljs-built_in">grayscale</span>(<span class="hljs-number">100%</span>); <span class="hljs-comment">/firefox/</span>
<span class="hljs-attribute">-ms-filter</span>: <span class="hljs-built_in">grayscale</span>(<span class="hljs-number">100%</span>); <span class="hljs-comment">/ie9/</span>
<span class="hljs-attribute">-o-filter</span>: <span class="hljs-built_in">grayscale</span>(<span class="hljs-number">100%</span>); <span class="hljs-comment">/opera/</span>
<span class="hljs-attribute">filter</span>: <span class="hljs-built_in">grayscale</span>(<span class="hljs-number">100%</span>);
<span class="hljs-attribute">filter</span>:progid:DXImageTransform.Microsoft.<span class="hljs-built_in">BasicImage</span>(grayscale=<span class="hljs-number">1</span>);
<span class="hljs-attribute">filter</span>:gray; <span class="hljs-comment">/ie9- /</span>
}
</pre><p>以上几种方法,都是通过CSS的滤镜来控制页面的显示而已,唯一不同的就CSS代码调用的方式,根据实际的需要选择添加到代码中。</p>
<div id="catalog-col">
文章目录

<script>function Catalogswith(){document.getElementById("catalog-col").classList.toggle("catalog");document.getElementById("catalog").classList.toggle("catalog")}</script>
</div>
</div>

0

评论 (0)

取消