html - 不透明度仅在 ul 上不在 li css 上

标签 html css

<分区>

我有一个高度为 300 像素的列表,我希望背景具有不透明度。但列表项必须保持不变(不透明度 1)。我怎样才能做到这一点?这是我的代码:

HTML:

<div class="dropdown">
                    <span class="notif">2</span>
                    <ul class="dropdown-menu">
                        <li><a href="#"><span>Elisadehasque</span> liked your story in <span>Disneyland Paris</span><span class="done">x</span></a></li>
                        <li><a href="#"><span>Petyana</span> started following you<span class="done">x</span></a></li>
                    </ul>
                </div>

CSS:

    .dropdown .dropdown-menu {
    position: absolute;
    top: 100%;
    display: none;
    margin: 0;
    margin-left: -100px;

    padding: 0;
    height: 300px;
    width: 250px;
    background-color: #fff;
    z-index: 10;
    opacity: 0.8;
}

.dropdown-menu li {
    z-index: 999999;
    opacity: 1;
}

最佳答案

使用rgba :

.dropdown .dropdown-menu {
    background-color: rgba(255, 255, 255, 0.8);
}

来自documentation :

rgba()

Colors can be defined in the Red-green-blue-alpha model (RGBa) using the rgba() functional notation. RGBa extends the RGB color model to include the alpha channel, allowing specification of the opacity of a color. a means opacity: 0=transparent; 1=opaque;

rgba(255,0,0,0.1) /* 10% opaque red */

rgba(255,0,0,0.4) /* 40% opaque red */

rgba(255,0,0,0.7) /* 70% opaque red */

rgba(255,0,0, 1) /* full opaque red */

关于html - 不透明度仅在 ul 上不在 li css 上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30258859/

相关文章:

java - Jsoup:无法选择某些元素,尽管我可以在页面的 html 源代码中看到它们

javascript - 如何创建由事件触发的下雨效果?

javascript - TR 的 onblur 功能

jquery - 如何在没有滚动的情况下使追加的 div 文本可见?

java - jsp图片显示_不断获取0x0尺寸

HTML 垂直对齐失败?

javascript - 在 Canvas 内绘制图像

jquery - 固定在溢出容器内的位置 - scrollToFixed

html - 导航栏菜单故障排除

html - 3 Logo 不会随着响应式导航栏消失