时间戳

首页 > 解决方案 > 背景图像不会出现在 CSS 中

html - 背景图像不会出现在 CSS 中

问题描述

在过去的几个小时里，我一直试图将图像作为背景放在 HTML 元素中，但是，在我放入导航栏后，背景不知何故不会出现，我认为它与导航栏背景有关优先，但老实说我不知道​​。

HTML、CSS

@charset: "utf-8";
html {
  background-image: url(../design/background.png);
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: right;
}

li a {
  display: block;
  color: #fff;
  text-align: center;
  padding: 27px 60px;
  text-decoration: none;
  font-family: 'Abel', sans-serif;
}

li a:hover {
  background-color: #7446ad;
}

#logo {
  float: left;
  width: 100px;
  height: 60px;
  padding: 5px 5px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles.css">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Abel&display=swap" rel="stylesheet">
</head>

<body>
  <nav>
    <div>
      <ul>
        <li><a href="#">SUPPORT</a></li>
        <li><a href="#">STORE</a></li>
        <li><a href="#">TEAMS</a></li>
        <a class="navbar-brand">
          <img src="asd2.png" id="logo">
        </a>
      </ul>
    </div>
  </nav>
</body>

</html>

由于某种原因，即使我将选择器更改为html选择器，背景图像也不会显示为背景body。.

标签： htmlcss

解决方案

似乎您将 css 移到了它自己的文件styles.css中，但忘记去掉封闭的 html<style>标记。

删除它们，理论上我相信图像会加载。

也改变

@charset: "utf-8";

至

@charset "utf-8";

但这与问题无关。

推荐阅读