您当前的位置:网站首页>CSS>css实现将网页变成黑白色 找CSS教程就上ki4.cc (>^ω^<),css,网页,黑白色

css实现将网页变成黑白色 找CSS教程就上ki4.cc (>^ω^<),css,网页,黑白色

2020年05月15日 投稿作者: 围观人数:38

如何用CSS写轮播图效果? 找CSS教程就上ki4.cc (>^ω^<)

相信很多小伙伴做过的项目里面都有轮播图这么一个需求,有的小伙伴可能会自己造轮子,但是如果不使用JavaScript,能不能实现轮播图的效果呢?本篇文章就带着大家有纯CSS实现轮播图效果。

将整个网页全局变色有三种方法,分别是:css直接设置,添加svg滤镜,通过js遍历所有标签更改颜色。

1、css直接设置

直接编辑样式,然后在需要应用的地方设置class

.gray { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}

(视频教程:css视频教程)

2、svg

先编写svg文件

css中常用的水平垂直居中对齐方法有哪些 找CSS教程就上ki4.cc (>^ω^<)

本文为大家介绍了css中常用的几种水平垂直居中对齐方法,具有一定的参考价值,希望可以帮助到大家。元素的水平垂直居中可以使用:1、绝对定位;2、绝对定位+calc();3、display:flex。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <filter id="grayscale">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
    </filter>
</svg>

css调用

filter: url(gray.svg#grayscale);

3、js遍历

直接插入代码就好啦,能白嫖是不可能手写的(ps:用rgba和!important的无法改变,其他未实验)

<script src="http://james.padolsey.com/demos/grayscale/grayscale.js"></script>

js源不太好,会导致网页加载过慢,可手动下载到本地grayscale.js(点开之后F12,切换到Network标签,刷新网页会出现一个文件,右键save as)

然后用js或者jq调用

/*js调用*/
grayscale(document.getElementById("thisImage"));
/*jq调用*/
grayscale($("#thisImage"));

推荐教程:css快速入门

以上就是css实现将网页变成黑白色的详细内容,更多请关注ki4导航其它相关文章!

css实现隐藏元素效果 找CSS教程就上ki4.cc (>^ω^<)

本文为大家介绍了css实现隐藏元素效果的方法,具有一定的参考价值,希望可以帮助到大家。css实现隐藏元素效果的方法:1、display:none;2、visibility:hidden;3、opacity:0。

标签

版权说明
免责声明:本文文章内容由ki4导航网发布,但不代表本站的观点和立场,具体内容可自行甄别.