Question

<div id="home">
<div class="landing-text">
  <h1 class="display-2"> One Piece MMO</h1>
<button type="button" class="btn btn-primary btn-lg">Watch Trailer</button>
     <button type="button" class="btn btn-primary btn-lg">Download Game</button>
</div>
</div>

#home{
background: url(images/bg.png) no-repeat fixed center; 
display: table;
height: 100%;
position: relative;
width: 100%;
background-size: cover; 
}

为什么我看不到背景图片？无法弄清楚问题....试过“background-image：url（”image / bg.png“）和”background：url（“images / bg.png”）

Answer 1

如果您的CSS代码与HTML内联，请确保将其括在new Image.network(url)代码中：

<style>

Answer 2

您的代码实际上是正确的，这让我相信它可能与您要显示的图像的路径有关。我将网址更改为通用的随机猫图像，并且有效。将您的图片路径括在引号之间，如 url（＆＃34; images / bg.png＆＃34;）。

JS Fiddle

检查图像路径！

<div id="home">
<div class="landing-text">
  <h1 class="display-2"> One Piece MMO</h1>
<button type="button" class="btn btn-primary btn-lg">Watch Trailer</button>
     <button type="button" class="btn btn-primary btn-lg">Download Game</button>
</div>
</div>
#home {
background: url(http://www.catster.com/wp-content/uploads/2015/06/google-cat-search-2014-_0.jpg) no-repeat fixed center; 
display: table;
height: 100%;
position: relative;
width: 100%;
background-size: cover; 
}

Answer 3

你可以运行它。

<div id="home">
<div class="landing-text">
  <h1 class="display-2"> One Piece MMO</h1>
<button type="button" class="btn btn-primary btn-lg">Watch Trailer</button>
     <button type="button" class="btn btn-primary btn-lg">Download Game</button>
</div>
</div>
<style>
#home {
background: url(https://image.freepik.com/free-vector/happy-childrens-day-design_23-2147705019.jpg) no-repeat fixed center; 
display: table;
height: 100%;
position: relative;
width: 100%;
background-size: cover; 
}
<style>

背景图片不显示

3 个答案: