gpt4 book ai didi

html - 如何为图像提供黑色不透明叠加层?

转载 作者:行者123 更新时间:2023-11-28 16:10:11 25 4
gpt4 key购买 nike

我正忙于一个元素,我想如果我能为我的图片添加黑色不透明度会很酷,但问题是我无法让它工作。我试过将图像放在 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

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

最佳答案

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

#stage {
background-color: black;
}

#begin {
opacity: 0.4;
}

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

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

(为其他浏览器使用适当的前缀)

关于html - 如何为图像提供黑色不透明叠加层?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28137845/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com