文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用rgba(0,0,0,0.5)使我的背景变暗

问如何使用rgba(0,0,0,0.5)使我的背景变暗
EN

Stack Overflow用户

提问于 2020-04-05 02:55:23

回答 1查看 253关注 0票数 1

如果我不应该在这里张贴这个，有人能建议我把这个放在哪里吗？

TL;DR =需要我展示的图像背景才能变暗！

我正在创建这个网站与新的东西，我正在我的在线课程学习实践，这将是模板，我将继续添加的东西。

我以前也有过这样的经历，但我不得不重新做这件事，现在似乎无法让它发挥作用。

我的背景过去更暗，我设法使用一个类的背景图像，然后在我的风格背景rgba(0,0,0,0.5)中的某个地方，这将使我的背景变暗，并允许完美地阅读文本。

现在，每当我尝试这样做，我似乎无法使它工作，我已经尝试使用前或后属性，使用rgba在一个完全不同的div在html中，但似乎不能这样做？

背景图像链接：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 &copy; 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>

非常感谢

努诺

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-04-05 03:06:47

您可以使用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');

Js小提琴：https://jsfiddle.net/hansfelix50/9hw2o5kp/

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61037450

复制

相似问题

问如何使用rgba(0,0,0,0.5)使我的背景变暗
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用rgba(0,0,0,0.5)使我的背景变暗EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用rgba(0,0,0,0.5)使我的背景变暗
EN