灰度背景的CSS图片(Greyscale Background Css Images)

2019-09-01 18:04发布

站内文章 / 前端开发
126 0 0

我在网上搜索了很多，但我不能找到一个跨浏览器解决方案褪色一个css backgrund图像灰度图像和背部。

唯一的工作解决方法是使用CSS3过滤灰阶： 

-webkit-filter: grayscale(100%);

但这个工程只是使用Chrome 15节+和Safari .6 +（你可以在这里看到： http://css3.bradshawenterprises.com/filters/ ）

许多网页在线谈到这个解决方案变灰元素： 

filter: url("data:image/svg+xml;utf8,<svg 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>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */

（你可以在这里看到： http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html ）

但实际上它似乎并不为CSS背景图像工作，因为WebKit的过滤器做。

是否有任何解决方案（也许与jQuery？）破解这种缺乏对后进浏览器的滤波器支持？

Answer 1:

干得好： 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>bluantinoo CSS Grayscale Bg Image Sample</title>
<style type="text/css">
    div {
        border: 1px solid black;
        padding: 5px;
        margin: 5px;
        width: 600px;
        height: 600px;
        float: left;
        color: white;
    }
     .grayscale {
         background: url(yourimagehere.jpg);
         -moz-filter: url("data:image/svg+xml;utf8,<svg 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>#grayscale");
         -o-filter: url("data:image/svg+xml;utf8,<svg 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>#grayscale");
         -webkit-filter: grayscale(100%);
         filter: gray;
         filter: url("data:image/svg+xml;utf8,<svg 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>#grayscale");
     }

    .nongrayscale {
        background: url(yourimagehere.jpg);
    }
</style>
</head>
<body>
    <div class="nongrayscale">
        this is a non-grayscale of the bg image
    </div>
    <div class="grayscale">
        this is a grayscale of the bg image
    </div>
</body>
</html>

在Firefox，Chrome和IE浏览器进行了测试。 我还附有图片，以显示我的我实现这个结果。

编辑：另外，如果你想要的形象只是来回切换使用jQuery，下面是该页面的源代码...我已经列入本网站链接的jQuery和和形象，不在线，所以你就应该能够复制/粘贴到测试一下： 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>bluantinoo CSS Grayscale Bg Image Sample</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<style type="text/css">
    div {
        border: 1px solid black;
        padding: 5px;
        margin: 5px;
        width: 600px;
        height: 600px;
        float: left;
        color: white;
    }
     .grayscale {
         background: url(http://www.polyrootstattoo.com/images/Artists/Buda/40.jpg);
         -moz-filter: url("data:image/svg+xml;utf8,<svg 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>#grayscale");
         -o-filter: url("data:image/svg+xml;utf8,<svg 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>#grayscale");
         -webkit-filter: grayscale(100%);
         filter: gray;
         filter: url("data:image/svg+xml;utf8,<svg 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>#grayscale");
     }

    .nongrayscale {
        background: url(http://www.polyrootstattoo.com/images/Artists/Buda/40.jpg);
    }
</style>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#image").mouseover(function () {
                $(".nongrayscale").removeClass().fadeTo(400,0.8).addClass("grayscale").fadeTo(400, 1);
            });
            $("#image").mouseout(function () {
                $(".grayscale").removeClass().fadeTo(400, 0.8).addClass("nongrayscale").fadeTo(400, 1);
            });
        });
</script>
</head>
<body>
    <div id="image" class="nongrayscale">
        rollover this image to toggle grayscale
    </div>
</body>
</html>

编辑2（对于IE10-11用户）：上述解决方案将不会与微软浏览器作出的后期变化工作，所以这里是一个更新的解决方案，让您为灰度（或饱和度）图像。 

 <svg> <defs> <filter xmlns="http://www.w3.org/2000/svg" id="desaturate"> <feColorMatrix type="saturate" values="0" /> </filter> </defs> <image xlink:href="http://www.polyrootstattoo.com/images/Artists/Buda/40.jpg" width="600" height="600" filter="url(#desaturate)" /> </svg>



Answer 2:

使用目前的浏览器，你可以使用它像这样： 

img {
  -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
  filter: grayscale(100%);
}

并且解决它： 

img:hover{
   -webkit-filter: grayscale(0%); /* Chrome, Safari, Opera */
   filter: grayscale(0%);
}

和我一起工作，要短得多。 甚至有更多的人能在CSS中这样做： 

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() |
        hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

欲了解更多信息和支持的浏览器看到： http://www.w3schools.com/cssref/css3_pr_filter.asp



Answer 3:

我知道这是一个非常古老的问题，但它是在duckduckgo的第一个结果，所以我想分享一下我认为这是一个更好，更现代化的解决方案。

您可以使用background-blend-mode属性来实现灰度图像： 

#something {
  background-color: #fff;
  background-image: url("yourimage");
  background-blend-mode: luminosity;
}

如果你想删除的效果，只是改变混合模式，以initial 。

您可能需要发挥一点点的背景色，如果该元素是在一些与背景。 我发现的是灰度不依赖于实际的颜色，但在alpha值。 所以，如果你对父母蓝色背景，设置相同的背景#something 。

您还可以使用两个图像，一个颜色和其他没有，并设置既作为背景，并与其他混合模式播放。

https://www.w3schools.com/cssref/pr_background-blend-mode.asp

它不会在边缘的工作，虽然。

编辑：我错过了问题的“变脸”的一部分。

如果你wan't使其自/至灰阶褪色，您可以使用背景色的CSS过渡量变到质变它的alpha值： 

#something {
  background-color: rgba(255,255,255,1);
  background-image: url("yourimage");
  background-blend-mode: luminosity;
  transition: background-color 1s ease-out;
}
#something:hover {
  background-color: rgba(255,255,255,0);
}

我还增加了对完整性一个codepen例如https://codepen.io/anon/pen/OBKKVZ



Answer 4:

你也可以使用： 

img{
   filter:grayscale(100%);
}


img:hover{
   filter:none;
}


Answer 5:

你并不需要真正使用复杂的编码！

灰度悬停：

-webkit滤波器：灰度（100％）;

灰度“悬停去”：

-webkit滤波器：灰度（0％）;

我只是做了我的CSS类有一个单独的悬停类和第二灰度增加。 这真的很简单，如果你真的不喜欢复杂。



文章来源: Greyscale Background Css Images
标签： css image background cross-browser grayscale
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~