背景图像的不透明度和灰度滤镜。使它黑白透明

杰里米

我想将我的背景图像设为半透明,并设置为灰度/黑白。我通过组合来自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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类常见问题

是否可以在xaringan幻灯片中调整背景图像的不透明度?

来自分类Dev

背景图像不透明度问题

来自分类Dev

CSS不透明度影响兄弟图像的不透明度

来自分类Dev

多个CSS 3背景图像-在顶部图像中添加不透明度

来自分类Dev

增加悬停时的透明背景不透明度?

来自分类Dev

如何在背景图像上使用不透明度而不影响文本?

来自分类Dev

背景图像的不透明度和灰度滤镜。使它黑白透明

来自分类Dev

将Alpha /不透明度应用于背景图像

来自分类Dev

如何在不影响背景颜色的情况下更改背景图像的不透明度?

来自分类Dev

背景图片的不透明度

来自分类Dev

如何使用CSS为div的背景图像设置不透明度或降低亮度

来自分类Dev

带旋转,重复和不透明度的CSS背景图像

来自分类Dev

是否可以在xaringan幻灯片中调整背景图像的不透明度?

来自分类Dev

使用插件将所有背景图像的不透明度设置为0

来自分类Dev

背景图像不透明度问题

来自分类Dev

我们是否可以设置面板背景图像的不透明度?

来自分类Dev

使用伪元素:: before在Div中显示低不透明度背景图像

来自分类Dev

根据页面宽度更改背景图像的不透明度

来自分类Dev

设置窗口图像背景的不透明度属性

来自分类Dev

如何仅在背景图像上而不在内部文本上应用div不透明度

来自分类Dev

如何使用CSS设置背景图像的不透明度?

来自分类Dev

如何快速编辑背景图像不透明度

来自分类Dev

如何更改正文标签背景图像的不透明度

来自分类Dev

带有小 JS 脚本的背景图像不透明度不适用于 iOS

来自分类Dev

尝试使用 css 为背景图像添加不透明度

来自分类Dev

CSS3 不透明度属性到背景图像之一

来自分类Dev

添加新 div 时背景图像不透明度增加

来自分类Dev

css背景图像部分宽度不透明度

来自分类Dev

使用js更改背景图像不透明度而不影响前景图像

Related 相关文章

  1. 1

    是否可以在xaringan幻灯片中调整背景图像的不透明度?

  2. 2

    背景图像不透明度问题

  3. 3

    CSS不透明度影响兄弟图像的不透明度

  4. 4

    多个CSS 3背景图像-在顶部图像中添加不透明度

  5. 5

    增加悬停时的透明背景不透明度?

  6. 6

    如何在背景图像上使用不透明度而不影响文本?

  7. 7

    背景图像的不透明度和灰度滤镜。使它黑白透明

  8. 8

    将Alpha /不透明度应用于背景图像

  9. 9

    如何在不影响背景颜色的情况下更改背景图像的不透明度?

  10. 10

    背景图片的不透明度

  11. 11

    如何使用CSS为div的背景图像设置不透明度或降低亮度

  12. 12

    带旋转,重复和不透明度的CSS背景图像

  13. 13

    是否可以在xaringan幻灯片中调整背景图像的不透明度?

  14. 14

    使用插件将所有背景图像的不透明度设置为0

  15. 15

    背景图像不透明度问题

  16. 16

    我们是否可以设置面板背景图像的不透明度?

  17. 17

    使用伪元素:: before在Div中显示低不透明度背景图像

  18. 18

    根据页面宽度更改背景图像的不透明度

  19. 19

    设置窗口图像背景的不透明度属性

  20. 20

    如何仅在背景图像上而不在内部文本上应用div不透明度

  21. 21

    如何使用CSS设置背景图像的不透明度?

  22. 22

    如何快速编辑背景图像不透明度

  23. 23

    如何更改正文标签背景图像的不透明度

  24. 24

    带有小 JS 脚本的背景图像不透明度不适用于 iOS

  25. 25

    尝试使用 css 为背景图像添加不透明度

  26. 26

    CSS3 不透明度属性到背景图像之一

  27. 27

    添加新 div 时背景图像不透明度增加

  28. 28

    css背景图像部分宽度不透明度

  29. 29

    使用js更改背景图像不透明度而不影响前景图像

热门标签

归档