Question

所以我有一个带有背景图片的页面，当我把文字放在上面时，我看到一个半透明的文本背景，使我的页面背景图像渲染方式不同，但仅限于有问题的文字。

有谁知道如何解决这个问题？这让我的页面看起来像是一个半透明的头，我不想要那里。

我已经链接到下面的项目了。 Codepen Project

＆＃13;

$("#nav-status").click(function(e) {
  e.preventDefault();
  $("#navigation").toggle();
});

＆＃13;

html,
body {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/wood-dark.png");
  overflow-x: hidden;
  font-family: "Oswald", sans-serif;
  text-align: center;
}


/*mobile rules*/

@media screen and (max-width: 1023px) {
  #nav-status {
    display: block;
    width: 100%;
    height: 32px;
    padding: 2px;
    background-color: rgba(0, 0, 0, 0.75);
  }
  ul {
    display: none;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    overflow: hidden;
    color: white;
    padding: 0;
    margin: 0;
  }
  li h1 {
    font-family: "Oswald", sans-serif;
    font-size: 1.5em;
  }
  ul li {
    width: 100%;
    min-height: 32px;
    padding: 0;
    display: block;
    position: relative;
    text-align: center;
  }
  li a:link,
  a:visited,
  a:active {
    color: white;
    font-family: "Oswald", sans-serif;
    font-size: 1em;
    text-decoration: none;
  }
  li a:hover {
    color: #ba1d30;
    font-family: "Oswald", sans-serif;
    font-size: 1em;
    text-decoration: none;
  }
  .content {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
  }
  .content h1 {
    font-family: "Bangers", cursive;
    color: #ba1d30;
    font-size: 2.5em;
    letter-spacing: 0.1em;
  }
}


/*desktop rules*/

@media screen and (min-width: 1024px) {
  #nav-status {
    display: none;
  }
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 20%;
    background-color: rgba(0, 0, 0, 0.85);
    height: 100%;
    position: fixed;
    overflow: hidden;
  }
  li h1 {
    font-size: 3em;
  }
  ul li {
    color: white;
    margin: auto;
    width: 50%;
    padding: 2px;
  }
  li a:link,
  a:visited,
  a:active {
    color: white;
    font-family: "Oswald", sans-serif;
    font-size: 2em;
    text-decoration: none;
  }
  li a:hover {
    color: #ba1d30;
    font-family: "Oswald", sans-serif;
    font-size: 2em;
    text-decoration: none;
    font-style: italic;
  }
  .content {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    margin-left: 20%;
  }
  .content h1 {
    font-family: "Bangers", cursive;
    color: #ba1d30;
    font-size: 5em;
    letter-spacing: 0.1em;
  }
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Portfolio Template</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="style.css">
  <link rel="shortcut icon" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/nerdcatkiss.png">
  <link href="https://fonts.googleapis.com/css?family=Bangers|Oswald" rel="stylesheet">

  <link rel="stylesheet" href="css/style.css">

</head>

<body>

  <body>
    <div>
      <a href="#" id="nav-status"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/nerdcatkiss.png" alt="Kissy Cat"></a>
      <ul id="navigation">
        <li>
          <h1>Explore</h1>
        </li>
        <li>
          <a href="#" target="framename">Web Pages</a>
        </li>
        <li>
          <a href="#">Games</a>
        </li>
        <li>
          <a href="#">Productivity</a>
        </li>
        <li>
          <a href="#">Category 4</a>
        </li>
      </ul>
    </div>
    <div class="content">
      <h1>Valarie Pisarcik</h1>
    </div>
  </body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  <script src="js/index.js"></script>

</body>

</html>

＆＃13;

半不透明文本背景？

0 个答案: