0

我的问题与无序列表的文本有关。

我有一个背景图像，并且希望在项目符号和文本周围的白框上具有大约 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;
}
4

3 回答 3

1

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

这是示例

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;
}
于 2012-04-23T17:52:21.623 回答
0
  • 给你ul的类faded而不是所有的li元素。
  • 在 上使用一些填充，ul这样您就可以摆脱.slim列表项。
  • 并使用rgba背景颜色而不是不透明度。
于 2012-04-23T17:44:33.410 回答
0

嗨，您可以首先使用两种方法，即您可以赋予li class和定义属性list-style: none;

像这样

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/

于 2012-04-24T08:47:59.740 回答