Question

我正在尝试将我的conatiner.png透明背景应用于我的“indexbar”div，但它只是不会显示。它适用于我的主容器，我在style.css中以相同的方式执行它但不适用。

的index.html：

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>Reapers Overpoch Store</title>
</head>

<body>
<center>
  <div class="banner"><img src="images/banner.png" width="1000" height="400"></div>
  <div class="indexbar"><p style="color: #FFF; font-size: 24px">Loadouts | Crates | Buildings | Vehicles & Insurance | Misc</p></div>
<div class="container">
  <div class="content">
    <h2 style="color: #FFF">Welcome to the Reapers Overpoch Store!</h2>
    <p style="color: #FFF">This is where you will find all the donator perks for the Reapers Midnight Recon DayZ servers! All payments are final and specified items will be charged monthly if not cancelled! All items are always up to date and include full details along with pictures.</p>
    <p style="color: #FFF"><strong>How to Donate:</strong> If you would like to purchase an item, then click the <strong><i>Buy Now</i></strong> or <strong><i>Donate</i></strong> button associated with it and continue via PayPal.</p>
    <p style="color: #FFF"><strong>Delivery Notice:</strong> We do our best to get your items either applied to your character, or added in-game as soon as possible. If there are any delays, it due to unavailability of an admin or coder.</p>
  </div>
</div>
</center>
</body>

</html>

的style.css：

body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-image: url("images/background.jpg");
    background-size: cover;
    background-attachment: fixed;
    margin: 80;
    padding: 0;
    color: #000;
}

ul, ol, dl {
    padding: 0;
    margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;
    padding-right: 15px;
    padding-left: 15px;
}
a img {
    border: none;
}

a:link {
    color: #42413C;
    text-decoration: underline;
}
a:visited {
    color: #6E6C64;
    text-decoration: underline;
}
a:hover, a:active, a:focus {
    text-decoration: none;
    font-weight: normal;
}

.container {
    width: 1000px;
    background-image: url("images/container.png");
    margin: 0 auto;
}

.content {
    padding: 10px;
    font-weight: normal;
    margin: 10px;
}
.banner {
    height: 400px;
    width: 1000px;
    margin: 10px;
}


.fltrt {
    float: right;
    margin-left: 8px;
}
.fltlft {
    float: left;
    margin-right: 8px;
}
.clearfloat {
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;

.container .content p em {
    font-size: 50%;
}
.container .content p {


}
.banner {
    margin: 10px;
    height: 400px;
    width: 1000px;
}
.indexbar {
    background-image: url(images/container.png);
    margin: 10px;
    height: 50px;
    width: 1000px;
    padding: 10px;
}

提前致谢。

Answer 1

您错过了引号：

.indexbar {
    background-image: url(images/container.png);
    margin: 10px;
    height: 50px;
    width: 1000px;
    padding: 10px;
}

应该是：

.indexbar {
    background-image: url("images/container.png");
    margin: 10px;
    height: 50px;
    width: 1000px;
    padding: 10px;
}

Answer 2

我看到的唯一区别是你没有引号但对我来说通常不是问题

background-image: url(images/container.png);

背景图像不适用于div

2 个答案: