CSS样式实现网页变灰色/黑白代码的abc三个方法

2019-06-1121:45:47网页制作Comments3,213 views字数 709阅读模式

将网站整体的色调换成灰色、黑色色调,这个记得在以前纪念一些日子的时候会有用到,早年老蒋在自己的博客中也有使用的。记得那时候直接是修改CSS就可以实现,既然有用户需要,老蒋这里抽点时间再整理一下看看是否有其他更好的方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/13579.html

我们可以根据实际的需要选择合适的CSS代码样式添加到自己的网页模板的代码中实现网页灰色、黑白样式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/13579.html

第一、网页黑白代码样式A文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/13579.html

<style>
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;
}
</style>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/13579.html

这里我们可以将代码添加到HEAD模板中,要实现全站才可以。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/13579.html

第二、网页黑白代码样式B文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/13579.html

html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);
}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/13579.html

同样的可以添加到样式中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/13579.html

第三、网页黑白代码样式C文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/13579.html

<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);">文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/13579.html

这个直接是修改HEAD区域顶部HTML的,这个好像比较简单。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/13579.html

这里,我们根据实际的需要选择添加到代码中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/13579.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/zhizuo/13579.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定