Question

我的问题在于无序列表的文本。

我有一张背景图片，并希望在子弹和文本周围的白框上有大约60％的不透明度。我最初把它放在<li>之外，似乎验证器不喜欢它。

另一个问题是文字在60％不透明度下，所以颜色都没有真正流行。由于不透明，它们会被洗掉。

HTML：

<ul>
    <li><div class="faded slim">&nbsp;</div></li>
    <li><div class="faded"><a href="snowplowing.html">Snow Removal</a></div></li>
    <li><div class="faded"><a href="landscape.html">Landscape Construction</a></div></li>
    <li><div class="faded"><a href="parking.html">Parking Lot Maintenance</a></div></li>
    <li><div class="faded slim">&nbsp;</div></li>
</ul>

CSS：

.faded {
    opacity: 0.4;
    height: 19px;
    width: 175px;
    filter:alpha(opacity=40);
    background-color: #ffffff;
}

.slim {
    height: 13px;
}

Answer 1

您必须将背景不透明度分配给ul not li

here就是示例

HTML 的

<div id="a">
    <ul class="faded">
        <li><div ><a href="snowplowing.html">Snow Removal</a></div></li>
        <li><div><a href="landscape.html">Landscape Construction</a></div></li>
        <li><div><a href="parking.html">Parking Lot Maintenance</a></div></li>
    </ul>
</div>

CSS

.faded {
    width: 175px;
    background-color: rgba(255,255,255,0.4);
    padding: 13px 0;
}
#a {
    background-color:rgb(0,0,0);
    padding:10px;
}

Answer 2

将ul课程faded代替所有li元素。
在ul上使用一些填充，这样就可以摆脱.slim列表项。
使用rgba背景色代替不透明度。

Answer 3

你可以先使用两种方法，你可以提供li class并定义属性list-style: none;

AS喜欢这个

<强>的CSS

.buletnone{
list-style:none !important;
}

<强> HTML

<ul>
                    <li class="buletnone"><div class="faded slim">&nbsp;</div></li>
                    <li><div class="faded"><a href="snowplowing.html">Snow Removal</a></div></li>
                    <li><div class="faded"><a href="landscape.html">Landscape Construction</a></div></li>
                    <li><div class="faded"><a href="parking.html">Parking Lot Maintenance</a></div></li>
                    <li class="buletnone"><div class="faded slim">&nbsp;</div></li>
                </ul>

现场演示http://jsfiddle.net/rohitazad/tWRdM/30/

-------------------------------------------

-------------------------------

其次是在你的css中定义第一个和最后一个孩子，就像这样

#mainTitle table tr td ul li:first-child, #mainTitle table tr td ul li:last-child{
list-style:none;
}

现场演示http://jsfiddle.net/rohitazad/tWRdM/31/

带子弹的CSS（不透明度和盒子问题）

3 个答案:

-------------------------------------------

-------------------------------