我想将我的背景图像设为半透明,并设置为灰度/黑白。我通过组合来自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 */
}
这是这样的:
铬:工作
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前缀,因为它们是否支持无前缀或根本不支持。
Codepen:http://codepen.io/vandervals/pen/VLmbpx
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句