gpt4 book ai didi

html - 用透明背景颜色覆盖背景图像(全屏)

转载 作者:太空宇宙 更新时间:2023-11-03 20:13:59 27 4
gpt4 key购买 nike

我想用透明色覆盖我的背景图片,但颜色没有覆盖背景图片。

这是我的演示: http://jsfiddle.net/farna/73kx2/

CSS 代码:

.overlay{
background: rgba(0,0,255,0.5);
margin: 0 ;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}

最佳答案

LIVE DEMO

要实现这一点,您所要做的就是使用 Pseudo-elements - CSS在 body 上。我在这里使用 body:after

<强>1。风格:

body{
position:relative;
background: url(http://8pic.ir/images/cgnd518gxezm1m2blqo7.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100%;
height:100%;
margin:0
}
body:after{
position:fixed;
content:"";
top:0;
left:0;
right:0;
bottom:0;
background:rgba(0,0,255,0.5);
z-index:-1;
}

enter image description here

这是你的 HTML

<强>2。标记:

<body>
<div class="overlay">
<nav>
<ul>
<li><a href="#portfolio">SHOP</a></li>
<li><a href="#about">ABOUT</a></li>
<li><a href="#contact">PRESS</a></li>
</ul>
</nav>
</div>
</body>

关于html - 用透明背景颜色覆盖背景图像(全屏),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25153723/

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