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

我的名字交换

我正忙于一个项目,并认为如果可以在图片中添加黑色不透明效果会很酷,但问题是我无法使其正常工作。我试图将图像放入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"); }

如果有帮助,我也将其放在我的随机网站上?项目所在的网站

如果有人知道答案是非常棒的,因为我已经尝试过了,但此刻我被困住了。

劳利·拉詹德(Rauli Rajande)

您可以将容器设为黑色背景或使用CSS过滤器:

#stage {
  background-color: black;
}

#begin {
  opacity: 0.4;
}

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

或者

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

黑色不透明覆盖层使图像尺寸增大

来自分类Dev

如何为图像创建不透明度

来自分类Dev

如何使Python curses覆盖不透明?

来自分类Dev

如何在具有不透明度的图像顶部添加黑色图层

来自分类Dev

图像不透明

来自分类Dev

当覆盖层也具有不透明的黑色背景时,黑色不可见

来自分类Dev

当覆盖层也具有不透明的黑色背景时,黑色是不可见的

来自分类Dev

如何为网格背景而不是网格中的控件设置图像的不透明度动画?

来自分类Dev

如何在Java中使透明图像不透明?

来自分类Dev

UIImagePickerController黑色不透明底部栏

来自分类Dev

UIImagePickerController黑色不透明底部栏

来自分类Dev

如何为 IE 设置边框不透明度?

来自分类Dev

图像复制不透明

来自分类Dev

如何使用Bootstrap的轮播组件更改图像的不透明度,而不更改覆盖文本

来自分类Dev

如何设置图像与DIV对应的不透明度

来自分类Dev

如何更改图像的不透明度?

来自分类Dev

如何改变图像的不透明性

来自分类Dev

SwiftUI-如何脉动图像不透明度?

来自分类Dev

黑色透明覆盖在图像上

来自分类Dev

覆盖div的不透明度

来自分类Dev

使用ffmpeg添加不透明的覆盖

来自分类Dev

覆盖div的不透明度

来自分类Dev

如何使填充不透明?

来自分类Dev

如何避免艾伯特上的黑色边框/背景,即不透明?

来自分类Dev

Xamarin.Forms:如何使 iOS 状态栏背景不透明黑色?

来自分类Dev

如何创建顶部不透明度为100%,底部不透明度为0%的渐变图像?

来自分类Dev

绝对定位且不透明的黑色div不能覆盖某个元素,我不知道为什么

来自分类Dev

在Ffmpeg中用不透明度设置覆盖图像

来自分类Dev

图像“淡入/淡出”(不透明)

Related 相关文章

热门标签

归档