Question

我有一个全屏固定图像，我想在顶部添加一个叠加层，但我尝试过的任何内容都没有。

<div class="container">
    <div class="overlay">
        <img src="image.jpg" />
    </div>
</div>

.container {
    width: 100%;
    padding: 0;
}
.container>.overlay>img {
    position: fixed;
}
.container>.overlay {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    z-index: 3;
}

https://jsfiddle.net/extyehqz/

然而，这不会产生任何结果

Answer 1

最好的想法是将图像作为身体的背景图像。以下是遵循这一想法的解决方案。如果你真的希望它成为一个图像元素让我知道我会发布一个解决方案。主要想法是使用

background-color: rgba(...);

https://jsfiddle.net/j1quLk7h/

Answer 2

如果我理解你的问题。这可能是一种方法。

.container {
    width: 100%;
    padding: 0;
}
.container>img {
    
}
.container>.overlay {
    width: 100%;
    height: 100%;
    background: red;
    z-index: 3;
    position: fixed;
    opacity:0.4;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="overlay">
      
    </div>
  
    <img src="http://goo.gl/2Xzi3L" />
    
  
</div>

添加叠加到Bootstrap全屏固定图像

2 个答案: