页脚重叠HTML中的主页框和框透明胶片

Question

我在主页上设置了一些功能框，但是背景图片.../images/darker.png仅显示在图片的左侧，盒子的遗体透明。

这里是我的家，我的盒子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种颜色，但页脚的背景只能为1种颜色。

这里是图像脚本，请参考前面的代码图像样式。

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

我会很感激任何帮助，我可以在这里。

有关此问题的详细信息，这里是我的网站的链接：http://cudahost.com/new

Answer 1

对于家庭盒子，你需要设置背景重复：

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

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

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