我正忙于一个项目,并认为如果可以在图片中添加黑色不透明效果会很酷,但问题是我无法使其正常工作。我试图将图像放入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"); }
如果有帮助,我也将其放在我的随机网站上?项目所在的网站
如果有人知道答案是非常棒的,因为我已经尝试过了,但此刻我被困住了。
您可以将容器设为黑色背景或使用CSS过滤器:
#stage {
background-color: black;
}
#begin {
opacity: 0.4;
}
小提琴:http://jsfiddle.net/oravdmxe/
或者
#begin {
-webkit-filter: brightness(50%);
}
(为其他浏览器使用适当的前缀)
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句