使 CSS 背景图像变暗

Posted 2023-03-06

【中文标题】使 CSS 背景图像变暗

【英文标题】：Darkening a CSS background image

【发布时间】：2017-03-07 11:41:48

【问题描述】：

我想使背景图片变暗。我发现我必须使用不透明度，所以我编写了我的 css 代码：

body 
        width: 960px;
        margin: 0 auto;
        font-family: Georgia, Times, serif;
        background:
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url('../pics/parachute.jpg');

一切正常！但是当我添加一些标志来制作全屏背景图片时，我的效果就消失了。

body 
        width: 960px;
        margin: 0 auto;
        font-family: Georgia, Times, serif;
        background:
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url('../pics/parachute.jpg');
        -webkit-background-size: cover;
        -moz-background-size:  cover;
        -o-background-size: cover;
         background-size: cover;

不工作的原因是什么？

【问题讨论】：

你需要在背景上叠加一个div，并给它渐变或rgba

同样的问题：***.com/questions/9182978/…

您在这两种情况下的代码都非常适合我在 Codepen 上使用 here 和 here。

@Araz 为什么？我认为根本不需要这样做

【参考方案1】：

这是您可以在不丢失任何应用效果的情况下使背景图像变暗的方法。

   

    .bg
      background: url('http://res.cloudinary.com/wisdomabioye/image/upload/v1462961781/about_vbxvdi.jpg');
      height: 500px;
      -webkit-background-size: cover;
      -moz-background-size:  cover;
      -o-background-size: cover;
       background-size: cover;
    
    .content
      background: rgba(0,0,0,0.4);
      color: white;
      height: inherit;
      padding-left: 10px;
    

<div class='bg'>
        
   <div class='content'>
     <p>
        Some content Some content Some content Some                content Some content Some Some content Some content Some content Some content Some content Some Some content Some content Some content Some content Some content Some Some content Some content Some content Some content Some content Some Some content Some content Some content Some content Some content Some Some content Some content Some content Some content Some content Some Some content Some content Some content Some content Some content Some Some content Some content Some content Some content Some content Some Some content Some content Some content Some content Some content Some 
 
    </p> 
  </div> 
 </div>

    

【讨论】：

Try CodePen（因为它似乎不适用于 jsFiddle）