html - HTML 中的页脚重叠 Home-Box 和 Box Transparencies

Question

我在我的主页上设置了一些功能框，但是背景图像 .../images/darker.png 只显示在图像的左侧，使框的其余部分透明。

这是我的 Home-Boxes 的 CSS 代码:

/* Features Area */
.box { background-repeat: repeat-y; background-position: 0 0; }
.box .box-b { background-repeat: no-repeat; background-position: 0 bottom; }
.box .box-t { background-repeat: no-repeat; background-position: 0 top; }
.home-box {
    float: left; display: inline; width: 314px;
    background-image: url(images/darker.png);
    margin-right: 19px;
}
.home-box .box-b { background-image: url(images/darker.png);}
.home-box .box-t { background-image: url(images/darker.png); padding: 10px 20px; }
.home-box h4 {
    font-size: 16px; color: #36429B; font-weight: bold; text-transform: none;
}
.home-box a {
    color: #1a8f1d; font-weight: bold; padding-top: 5px; display: block;
}
.home-box img.right { margin-top: 50px; }
.cl {
    display: block; height: 0; font-size: 0; line-height: 0;
    text-indent: -4000px; clear: both;
}

这是我的主箱 HTML..

<!-- home boxes -->
<div class="box home-box">
   <div class="box-b">
      <div class="box-t">
         <h4>Control Panel</h4>
         <!--<img src="css/images/home-box-image1.gif" alt="" class="right" />-->
         <p>We use an ultra-sleak, clean control panel that is rarely used by other companies, it's fast and extremely easy to use, full of brand new features!</p>
         <div class="cl">&nbsp;</div>
      </div>
   </div>
</div>
<div class="box home-box">
   <div class="box-b">
      <div class="box-t">
         <h4>Powerful Hardware</h4>
         <!--<img src="css/images/home-box-image2.gif" alt="" class="right" />-->
         <p>Using powerful machines, nothing is a match for our hardware and we can provide you with fast and responsive customs at all times!</p>
         <div class="cl">&nbsp;</div>
      </div>
   </div>
</div>
<!-- second line -->
<div class="box home-box last">
   <div class="box-b">
      <div class="box-t">
         <h4>Server Mod Support</h4>
         <!--<img src="css/images/home-box-image3.gif" alt="" class="right" />-->
         <p><b>We support almost every server mod including Tekkit, Bukkit, Hexxit and much more. Need help installing them? Submit a ticket!</b></p>
         <div class="cl">&nbsp;</div>
      </div>
   </div>
</div>
<div class="box home-box">
   <div class="box-b">
      <div class="box-t">
         <h4>Specialized Support</h4>
         <!--<img src="css/images/home-box-image1.gif" alt="" class="right" />-->
         <p>We have a professional support team who are always happy to help, and are fast and caring about what they do. You can rely on us!</p>
         <div class="cl">&nbsp;</div>
      </div>
   </div>
</div>
<div class="box home-box">
   <div class="box-b">
      <div class="box-t">
         <h4>Migration Assistance</h4>
         <!--<img src="css/images/home-box-image2.gif" alt="" class="right" />-->
         <p>If you have a server elsewhere and want to move to us, we'll help you transfer all your files and data, apsolutely free of charge!</p>
         <div class="cl">&nbsp;</div>
      </div>
   </div>
</div>
<div class="box home-box last">
   <div class="box-b">
      <div class="box-t">
         <h4>Hardware Specs</h4>
         <!--<img src="css/images/home-box-image3.gif" alt="" class="right" />-->
         <p>E3-1270v3<br />32GB DDR3 ECC Memory<br />240GB Solid-State Drives<br />1Gbps Uplink</p>
         <div class="cl">&nbsp;</div>
      </div>
   </div>
</div>
<!-- end home boxes -->

如您所见，主页框与页脚重叠。页脚上方应留出约 1 厘米的空间，以免重叠。此外，页脚的背景图片显示了 2 种颜色，但页脚的背景应该只显示一种颜色。

这里是图片脚本，图片样式请引用前面的代码。

bg-image="/images/darker.png"。

如果我能在这里得到任何帮助，我将不胜感激。

有关此问题的更多信息，这里是我的站点的链接:http://cudahost.com/new

Answer 1

对于home boxes，需要设置背景重复:

.box {
  background-repeat: repeat;
  background-position: 0 0;
}

事实上，如果我正确理解你的问题，内部 div 的样式也需要改变。目前，您使用 no-repeat 来防止背景重复，而是:

.box .box-b {
  background-repeat: repeat;
  background-position: 0 bottom;
}