CSS 背景图像的不透明度和灰度过滤器。使其成为黑白和透明
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30452467/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Opacity and grayscale filter of background image. Making it black and white and transparent
提问by Jeremy
I wanted to make my background image semi-transparent and in grayscale / black and white. I made the following code by combining codes from two different threads of Stackoverflow)
我想让我的背景图像半透明和灰度/黑白。我通过结合来自 Stackoverflow 的两个不同线程的代码制作了以下代码）
body {
position: relative;
background-size: 100% 100%;
background-repeat: no-repeat;
}
body::after {
content: "";
background: url('<?php echo $background[0]; ?>');
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
filter: grayscale(100%); /* Current draft standard */
-webkit-filter: grayscale(100%); /* New WebKit */
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%); /* Not yet supported in Gecko, Opera or IE */
filter: url(resources.svg#desaturate); /* Gecko */
filter: gray; /* IE */
-webkit-filter: grayscale(1); /* Old WebKit */
}
This is how this is working :
这是它的工作方式：
Chrome : working
铬：工作
Firefox : background image is not visible
Firefox：背景图像不可见
Safari : opacity works, filter does not
Safari：不透明度有效，过滤器无效
IE recent version : opacity works, filter does not
IE 最新版本：不透明度有效，过滤器无效
Can anyone enlighten me ?
任何人都可以启发我吗？
Thanks.
谢谢。
回答by Vandervals
The unprefixed should be at the bottom! Also, if you don't have content on your page, you should give min-height to the body:
无前缀的应该在底部！此外，如果您的页面上没有内容，则应为正文提供 min-height：
html{
height: 100%;
}
body {
position: relative;
background-size: 100% 100%;
background-repeat: no-repeat;
min-height: 100%;
}
body::after {
content: "";
background: url('http://jsequeiros.com/sites/default/files/imagen-cachorro-comprimir.jpg') no-repeat center center;
background-size:cover;
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
-webkit-filter: grayscale(1); /* Old WebKit */
filter: grayscale(1);
}A Tiger!Also, you don't need the moz, ms or o prefix as they whether support it unprefixed or don't support it at all.
此外，您不需要 moz、ms 或 o 前缀，因为它们是否支持无前缀或根本不支持它。
Codepen: http://codepen.io/vandervals/pen/VLmbpx
代码笔：http://codepen.io/vandervals/pen/VLmbpx
