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;
}

小提琴：http://jsfiddle.net/oravdmxe/

或

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

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

Answer 2

这是一个＆＃34;黑色不透明度＆＃34;在图像上（取决于你如何形容）。

＆＃13;

div {
  width: 300px;
  height: 300px;
  background: #000;
}

img {
  display: block;
  opacity: 0.5;
  transition: opacity 200ms ease-in-out
}

img:hover {
  opacity: 1;
}

＆＃13;

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

＆＃13;

Answer 3

尝试使用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>

如何为图像提供黑色不透明覆盖图？

3 个答案: