灰度背景Css图像
blu*_*noo 58 css background image cross-browser grayscale
我在网上搜索了很多,但我找不到一个跨浏览器解决方案来淡化css背景图像到灰度和背面.
唯一可行的解决方案是应用CSS3过滤器灰度:
-webkit-filter: grayscale(100%);
但这适用于Chrome v.15 +和Safari v.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？)来破解在不太先进的浏览器上缺少对过滤器的支持？
Ele*_*808 75
干得好:
<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的web链接和图像在线,所以你应该只能复制/粘贴测试它:
<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>- 这个解决方案会将受影响元素中的_everything_变为灰色,不管遗忘的内容是什么. (3认同)
- 在当前版本的chrome(59)中,我不得不将最后一行`filter:url(...)`移到所有其他过滤器之前使其工作.以防有人有类似的问题. (2认同)
Sve*_* Ya 16
使用当前浏览器,您可以像这样使用它:
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
- 这对背景图像不起作用 (2认同)
- 它可以使整个元素（包括背景图像）变为灰度，但该元素内的任何彩色图像也将为灰度 (2认同)
ari*_*uod 10
我知道这是一个非常古老的问题,但这是关于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
但它不适用于Edge.
编辑:我错过了问题的"淡入淡出"部分.
如果你不想让它从/到灰度渐变,你可以在背景颜色上使用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
| 归档时间： |
|
| 查看次数： |
145592 次 |
| 最近记录： |