成都网站建设设计

将想法与焦点和您一起共享

css3greyscale实现去色css3实现图片或页面变为黑白效果-创新互联

今天帮朋友看一效果,看到了手标滑过图片变为彩色的效果,很简单又兼容各大浏览器的,无非是准备两张图,一张黑白,一张彩色,滑过切换背景图或直接切换图片方法,当然,谁也不想这么复杂操作。

下面用css3安排下:

给标签加上下方css代码,即可变为黑白,也就是去色

我们注重客户提出的每个要求,我们充分考虑每一个细节,我们积极的做好成都网站设计、成都网站建设服务,我们努力开拓更好的视野,通过不懈的努力,成都创新互联公司赢得了业内的良好声誉,这一切,也不断的激励着我们更好的服务客户。 主要业务:网站建设,网站制作,网站设计,微信小程序开发,网站开发,技术开发实力,DIV+CSS,PHP及ASP,ASP.Net,SQL数据库的技术开发工程师。
filter: grayscale(100%);
filter: gray;

安排下兼容写法

-webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
如果要做滑过变为彩色,举个列子,网站页面一排排图片,均加了上方代码,变为黑白的,然后滑过让恢复颜色,如下方代码

初始代码

img{
    filter: grayscale(100%);
    filter: gray;
}

滑过代码

img :hover{
    filter: grayscale(0);
    filter: none;
}

整个网站页面变为黑白色,直接加给 html 即可安排

本文详情 http://www.sharedblog.cn/?post=186

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


新闻名称:css3greyscale实现去色css3实现图片或页面变为黑白效果-创新互联
文章网址:http://chengdu.cdxwcx.cn/article/dpsojg.html