Question

我的CSS有问题：

到目前为止我的编码：

#leftcolumn {
    background: url('SlicingImage/action_bar.jpg');
    background-repeat:none;
    float:left;
    z-index: -1;
}

HTML：

<div id="containerleft">
        <div id="leftcolumn"  >
            <p><img src="SlicingImage/alacards_logo.png"/></p>
            <ul>
            <li class="separator"></li>            
            <li class="buttons">home</li>
            <li class="separator"></li>
            <li class= "buttons">users</li>
            <li class="separator"></li>
            <li class= "buttons">tutorial</li>
            <li class="separator"></li>
            <li class= "buttons">issuers</li>
            <li class="separator"></li>
            <li class= "buttons">merchants</li>
            <li class="separator"></li>
            <li class= "buttons">partners</li>
            <li class="separator"></li>
            <li class= "buttons">high light</li>
            <li class="separator"></li>
            <li class= "buttons">news</li>
            <li class="separator"></li>
            <li class= "buttons">contact us</li>
            <li class="separator"></li>
            <li class="bottom"></li>     
            </ul>
        </div>
       </div>

如果我运行此代码，结果为：BG但我希望覆盖的小灰色区域如this

如果我删除

background：url（'SlicingImage / action_bar.jpg'）;

变得像BG2

我尝试添加class =“bottom”，但不喜欢我想要的（必须手动定义高度）

Answer 1

你的背景因为z-index而没有显示。尝试放一个更高的

Answer 2

尝试给ul和margin设置宽度：auto;

ul {
    list-style-type: none;
    margin: auto;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 750px;
}

Answer 3

Works for me：

#leftcolumn {
    background: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTFMUprTNP6nK2r2QxbZ-ls7YlgiVenNuwCBkXwX-keeE96iOradptCHPLZ);
    background-repeat:none;
    float:left;
    z-index: -1;
}

按钮和/或分隔符类中的内容一定是奇怪的。

注意：我使用了一些我在Google图片搜索中找到的随机粉红色背景图片。

Answer 4

我找到了解决方案：在</p>之后放</ul>后，会给我想要的结果

<div id="containerleft">
        <div id="leftcolumn"  >
            <p><img src="SlicingImage/alacards_logo.png"/>
            <ul>
            <li class="separator"></li>            
            <li class="buttons">home</li>
            <li class="separator"></li>
            <li class= "buttons">users</li>
            <li class="separator"></li>
            <li class= "buttons">tutorial</li>
            <li class="separator"></li>
            <li class= "buttons">issuers</li>
            <li class="separator"></li>
            <li class= "buttons">merchants</li>
            <li class="separator"></li>
            <li class= "buttons">partners</li>
            <li class="separator"></li>
            <li class= "buttons">high light</li>
            <li class="separator"></li>
            <li class= "buttons">news</li>
            <li class="separator"></li>
            <li class= "buttons">contact us</li>
            <li class="separator"></li>
            <li class="bottom"></li>     
            </ul>
            </p>
        </div>
       </div>

CSS简单使我的背景100％（自动浏览浏览器）？

4 个答案: