时间戳

首页 > 解决方案 > 由于其他元素，背景图像显示中断

html - 由于其他元素，背景图像显示中断

问题描述

我的背景被列表和 打断了，h3但它必须是一条实线。黄色的东西是背景图像。请求帮助。用于学校项目。

在图像中，您会看到一个黄色三角形表示中断的图像：

在图像中，您会看到一个黄色三角形 disist 中断的图像

这是我的代码：

* {
  background-image: url("https://placehold.it/300x300/");
  background-repeat: no-repeat;
  background-color: #252525;
  color: white;
  font-family: arial;
}

h1 {
  text-align: center;
  font-size: 42pt;
  background-image: url("https://placehold.it/300x300/f00/fff");
  text-transform: uppercase;
}

h3 {
  text-align: center;
  font-size: 28pt;
  text-transform: uppercase;
}

li {
  list-style-type: none;
  margin-top: 20px;
  margin-bottom: 20px;
}

a {
  color: yellow;
  list-style-type: none;
  width: 120px;
  text-align: center;
  font-size: 18pt;
  box-shadow: 3px 3px 3px black;
  font-weight: bold;
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="author" content="Jonas Ploberger">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Übersicht jonas Ploberger</title>

  <link rel="stylesheet" href="startseite.css">
</head>

<body>
  <h1>PlobergerJonas</h1>
  <h3>Home</h3>

  <ul>
    <li><a href="startseite.html">Home</a></li>
    <li><a href="photoshop.html">PS Bilder</a></li>
    <li><a href="ausbildung.html">Ausbildung</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
  </ul>
</body>

</html>

标签： htmlcss

解决方案

这里：

* {
      background-image: url("https://placehold.it/300x300/");
      background-repeat: no-repeat;
      background-color: #252525;
      color: white;
      font-family: arial;
  }

您正在使用通用选择器“*”，因此您正在为 html 文档中的每个元素设置背景图像。

因此，您想将该选择器替换为“body”或您希望在其上显示该背景图像的任何其他元素。

推荐阅读