Question

这是我的

html {}

body {
  background-image: url("https://i.giphy.com/media/H75Lo6V4M5pWrDo8mZ/giphy.webp") no-repeat;
  background-color: Linen;
  padding: 0;
  margin: 0;
}

.top {
  background-color: Black;
  overflow: hidden;
  color: White;
  border: solid 5px Black;
  border-radius: 0 0 25px 25px;
  padding: 0 25px 0 25px
}

<!doctype html>
<html>

<head>
  <title>Train of Thoughts</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="top">
    <h3 style="float: left">M</h3>
    <h3 style="float: right">F</h3>
  </div>
  <br>
</body>

</html>

代码

它确实显示背景颜色和顶部div标签，但未显示背景图像。我在html和css上还很新，所以也请解释一下

Answer 1

    html{
}
body{
background: url("https://i.giphy.com/media/H75Lo6V4M5pWrDo8mZ/giphy.webp") no-repeat;
background-color: Linen;
    padding: 0;
    margin: 0;
}
.top{
    background-color: Black;
    overflow: hidden;
    color: White;
    border: solid 5px Black;
    border-radius: 0 0 25px 25px;
    padding: 0 25px 0 25px
}

<!doctype html>
<html>
<head>
    <title>Train of Thoughts</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="top">
        <h3 style="float: left">M</h3>
        <h3 style="float: right">F</h3>
    </div>
    <br>
</body>
</html>

Answer 2

您可以尝试使用

background-size: cover;

它将拉伸图像以覆盖页面，但是由于gif的分辨率与屏幕不同，因此看起来有点奇怪。

此外，不重复是原因，它根本不显示。没有它，它将显示，但彼此相邻显示几次。

为什么背景图片不显示？

2 个答案: