如何为图像提供黑色不透明叠加层？

Question

我正忙于一个项目，我想如果我能为我的照片添加黑色不透明度会很酷，但问题是我无法让它工作。我试图将图像放在 div 中，而不是给它一个不透明度，我已经尝试将图像放在 CSS 中，但我无法开始工作。

你们中有人知道如何解决我的问题吗？

这是我用的 HTML:

<html>
    <head>
        <title>project</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <div id="stage">
            <div class="block" id="begin"></div>
            <div class="block" id="project"></div>
            <div class="block" id="dave"></div>
            <div class="block" id="marjolein"></div>
            <div class="block" id="steef_pieter"></div>
            <div class="block" id="odin"></div>
            <div class="block" id="end"></div>
        </div>
    </body>
</html>

这是 CSS:

html, body {
    min-height: 100%;
    margin: 0; padding: 0;
}


#stage {
    height: 800px; width: 100%;
    overflow: scroll; position: fixed;
}

.block {
    width: 100%; height: 100%;
    background-attachment: fixed;
    background-position: 50%;
    background-repeat: no-repeat;
    position: relative;
}

#begin { background: #000 ; opacity: 0.4; background-image: url("../images/begin.jpg"); }

#project {kground-image: url("../images/odin.jpg"); }

#dave { background-image: url("../images/backend.jpg"); }

#marjolein {background-image: url("../images/x.jpg"); }

#steef_pieter {background-image: url("../images/backend.jpg"); }

#odin {background-image: url("../images/odin.jpg");}

#end {background-image: url("../images/end.jpg"); }

我也把它放在了我的一个随机网站上，如果有帮助的话？ Website where the project is on

如果有人知道答案就太棒了，因为我已经尝试过了，但我现在卡住了。

Answer 1

您可以给容器设置黑色背景或使用 css 过滤器：

#stage {
  background-color: black;
}

#begin {
  opacity: 0.4;
}

fiddle: http://jsfiddle.net/oravdmxe/

或

#begin {
  -webkit-filter: brightness(50%);
}

（对其他浏览器使用适当的前缀）

Answer 2

试试这个，在图像前面放一个黑色背景的 div 和 opacity Fiddle

img{
    position:absolute;
}

.box{
    width:300px;
    height:300px;
    position:absolute;
    z-index:10;
    background:rgba(68,68,67,.8);
}

<img src="http://placekitten.com/300/301">
    <div class="box"></div>

Answer 3

这是一张 "black opacity" 图片（取决于您如何描述它）。

div {
  width: 300px;
  height: 300px;
  background: #000;
}

img {
  display: block;
  opacity: 0.5;
  transition: opacity 200ms ease-in-out
}

img:hover {
  opacity: 1;
}

<div>
  <img src="http://lorempixel.com/300/300/" alt="" />
</div>

如何为图像提供黑色不透明叠加层？

How can I give an image a black opaque overlay?

html

css

opacity