您现在的位置:首页 >> 前端 >> 内容

使用CSS将图片转换成黑白(灰色、置灰)

时间:2017/8/22 9:11:00 点击:

  核心提示:可能早就知道,像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的(filter: gray;),不过,当时,其他浏览器是无解的。不过,时代发展,如今,CSS3的逐步推进,我们也开始看到黑白效果大规模...

可能早就知道,像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的(filter: gray;),不过,当时,其他浏览器是无解的。不过,时代发展,如今,CSS3的逐步推进,我们也开始看到“黑白效果”大规模应用于实际的可能。

图片效果如下

使用CSS将图片转换成黑白(灰色、置灰)

代码如下,兼容IE浏览器





<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片灰色蒙版</title>
    <style>
        img {
            width:300px;
            height:300px;
        }
        .gray {
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: grayscale(100%);
            filter: gray;
        }
    </style>
</head>
<body>
    <img src="img/timg.jpg">
    <img src="img/timg.jpg" class="gray">
</body>
</html>

Tags:使用 用C CS SS 
作者:网络 来源:X__TAO的博客