Question

所以我从codepen.io那里获得了一个项目并对其进行了修改。但现在我尝试添加背景图片，但我无法显示它......这是我的代码：

＆＃13;

body {
  background-image: url("starwars.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

div.window {
  color: white;
  width: 500px;
  padding: .42rem;
  border-radius: 5px;
  background: #26466D;
  margin: 1rem;
  text-align: center;
  font-family: BlueHighway, Arial Black, sans-serif;
  margin: 0 auto;
}
div.window label {
  display: block;
  background: #660b0b;
  font-size: larger;
  border-radius: 5px;
  padding: .6rem;
  transition: .4s all linear;
}
div.window label:hover {
  cursor: pointer; background: #311;
}
input.toggle ~ div {
  height: 0px; margin: .2rem;
  overflow: hidden;
  transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620)
}
input.toggle:checked ~ div { height: 230px; }
input.toggle:checked + label { background: red; }
input.toggle { display: none; }

＆＃13;

<div style="height: 240px; padding-top: 1.2rem">
<div class="window">
<input type="checkbox" id="punch" class="toggle">
  <label for="punch">Use the Force, Luke.</label>
  <div>
    <img src="http://images.sequart.org/images/Star-Wars-still-use-the-force-luke-e1415132076759.jpg" style="max-width:100%;height:auto" alt="Ackbar">
  </div>
</div>
</div>

＆＃13;

如果有人能够找出我的背景图片没有显示的原因，那就太棒了！感谢。

Answer 1

我刚刚测试了你的代码并且工作正常，所以我认为发生的事情是背景图片的路径是错误的。

如果您的星球图像不在您的html页面的根文件夹中，则它不能是url("starwars.jpg");。检查你是否没有将它放在另一个文件夹中。

Answer 2

图片“starwars.jpg”与使用它的.html文件在同一文件夹中吗？

背景不会显示

2 个答案: