如何使用rgba(0,0,0,0.5)使背景变暗
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用rgba(0,0,0,0.5)使背景变暗相关的知识,希望对你有一定的参考价值。
[如果我不应该在这里发布这个,有人可以建议我在哪里发布这个吗?
TL; DR =需要我的展示柜图像背景变暗!
我正在使用在线课程中要学习的新知识创建该网站,这将是我继续添加内容的模板。
我以前有过这个,但是我不得不重新做一次,现在似乎无法使它正常工作。
我的背景以前更暗,我在课堂上使用背景图片设法做到了这一点,然后我在样式背景rgba(0,0,0,0.5)中也有某处使背景变暗并允许文本以便完美阅读。
现在,每当我尝试执行此操作时,我似乎都无法使其正常工作,我已经尝试使用before或after属性,在html中的另一个完全不同的div上使用rgba,但似乎无法做到这一点?
背景图片链接:https://postimg.cc/ZvSmDbgD
中部链接:https://jsfiddle.net/Nuno11/Luhmernp/1/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" media="screen and (max-width: 768px)" href="/css/mobile.css">
<link rel="stylesheet" media="screen and (min-width: 1100px)" href="/css/widescreen.css">
<title>Home</title>
</head>
<body id="home">
<!-- navbar -->
<div id="navbar-container">
<nav id="navbar">
<a href="#home">
<h3>
<span class="textPrimary">Pro</span>cessing...
</h3>
</a>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li>Challenges <i class="fas fa-arrow-down"></i></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
<!-- Header: Showcase -->
<div id="showcase-container">
<header id="showcase">
<div class="showcase-content">
<h1 class="p2">
<span class=textPrimary>Pro</span>cessing...
</h1>
<p class="p1">
Space for creative learning, self-improving and testing.
</p>
<p class="p1">
Building the blocks of a web developer.
</p>
<a href="about.html" class="btn">Find Out More</a>
</div>
</header>
</div>
<div id="footer-container">
<footer id="footer">
<p>
Copyright © Processing... 2020, All Rights Reserved.
</p>
</div>
</footer>
</div>
<script src="https://kit.fontawesome.com/9751c7be27.js" crossorigin="anonymous"></script>
<script src="java.js"></script>
</body>
</html>
非常感谢大家
努诺
答案
您可以使用CSS技巧:
background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
url('https://i.postimg.cc/kGV5GDy9/gray-metal-cubes-decorative-1005644.jpg');
小提琴:https://jsfiddle.net/hansfelix50/9hw2o5kp/
以上是关于如何使用rgba(0,0,0,0.5)使背景变暗的主要内容,如果未能解决你的问题,请参考以下文章