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

【问题标题】：How can I give an image a black opaque overlay?如何为图像提供黑色不透明覆盖？
【发布时间】：2017-11-16 17:40:34
【问题描述】：

我正忙于一个项目，并认为如果我可以为我的图片添加黑色不透明度会很酷，但问题是我无法让它工作。我试图将图像放在 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

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

【问题讨论】：

什么是“黑色不透明度”？
我猜你在找RGBA

标签： html css opacity

【解决方案1】：

你可以给你的容器黑色背景或使用 css 过滤器：

#stage {
  background-color: black;
}

#begin {
  opacity: 0.4;
}

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

或

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

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

【讨论】：

根据this，这在 IE 和早期版本的 Firefox（最新 35 个）上都不起作用
第一个 - 赋予图像 div 不透明度并将其放置在黑色背景 div 内，应该适用于过去 5 年的所有浏览器。当我需要做这样的事情时，这就是我使用的。
我指的是过滤器，抱歉。
也许有人会在 5 年后阅读它，过滤器会得到更好的支持；）

【解决方案2】：

这是图像上的“黑色不透明度”（取决于您如何描述它）。

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>

【讨论】：

【解决方案3】：

试试这个在图像前面放置一个带有黑色背景的 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>

【讨论】：