Question

我使用css属性在体内添加了背景图像：

  body{
   background-image: url('background-img.jpg');
  }

现在我要做的是为此背景图片添加不透明度属性。我们可以不使用z-index属性（即通过分离包含背景图像和内容的div）来做到这一点吗？如果它在图像标记内，我可以在css选择器中使用opacity：value属性，但事实并非如此。任何CSS技巧或解决方案将不胜感激!!

Answer 1

您可以将background渐变与rgba()和url()属性结合使用。

就像：

background: linear-gradient(rgba(244, 67, 54, 0.95),
                            rgba(33, 150, 243, 0.75),
                            rgba(139, 195, 74, 0.75),
                            rgba(255, 87, 34, 0.95)),
                            url("http://placehold.it/200x200");

请看下面的代码：

＆＃13;

body {
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(255, 255, 255, 0.6),
              rgba(255, 255, 255, 0.6),
              rgba(255, 255, 255, 0.6),
              rgba(255, 255, 255, 0.6)),
              url("http://lorempixel.com/400/200");
}

＆＃13;

<body>This is some text</body>

＆＃13;

希望这有帮助！

Answer 2

＆＃13;

div {
  background: url(http://placehold.it/300x300);
  background: linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)), url(http://placehold.it/300x300);
  height: 300px;
  width: 300px;
  background-repeat: no-repeat;
  background-size: cover;
}

＆＃13;

<div><div>

＆＃13;

Answer 3

试试这个的段

＆＃13;
＆＃13;
body{ height:430px; width:430px; } body::after { content: ""; background: url("https://www.google.com.pk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"); background-repeat:no-repeat; opacity: 0.5; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; }
＆＃13;
<body> <h1>Hello world </h1> </body>
＆＃13;
＆＃13;
＆＃13; 希望这对你有所帮助致谢

CSS：在body元素选择器中更改background-image的不透明度

3 个答案: