背景图像的不透明度和灰度过滤器。使它黑白透明
Opacity and grayscale filter of background image. Making it black and white and transparent
我想使我的背景图像为半透明和灰度/黑白。我通过组合来自 Whosebug 的两个不同线程的代码制作了以下代码)
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 */
}
这就是它的工作原理:
Chrome:工作
Firefox:背景图片不可见
Safari:不透明度有效,过滤器无效
IE 最新版本:不透明度有效,过滤器无效
谁能教教我?
谢谢。
无前缀的应该在最下面!
另外,如果你的页面上没有内容,你应该给正文指定最小高度:
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!
此外,您不需要 moz、ms 或 o 前缀,因为它们支持无前缀或根本不支持。
我想使我的背景图像为半透明和灰度/黑白。我通过组合来自 Whosebug 的两个不同线程的代码制作了以下代码)
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 */
}
这就是它的工作原理:
Chrome:工作
Firefox:背景图片不可见
Safari:不透明度有效,过滤器无效
IE 最新版本:不透明度有效,过滤器无效
谁能教教我?
谢谢。
无前缀的应该在最下面! 另外,如果你的页面上没有内容,你应该给正文指定最小高度:
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!
此外,您不需要 moz、ms 或 o 前缀,因为它们支持无前缀或根本不支持。