CSS设置透明度

最新推荐文章于 2024-12-08 22:07:32 发布

原创最新推荐文章于 2024-12-08 22:07:32 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #透明度 #设置透明背景

前端集结号同时被 2 个专栏收录

61 篇文章

订阅专栏

CSS

12 篇文章

订阅专栏

本文介绍了一种使用CSS实现元素半透明效果的方法，通过不同浏览器的兼容性设置，包括使用filter属性实现alpha透明效果和-moz-opacity及opacity属性。示例中展示了如何将这些应用于一个具体的网页元素，如底部导航栏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

div{
    filter: alpha(opacity=50);
    -moz-opacity: .5;
    opacity: .5;
}

下面是我用到的一个例子，最终效果为：

这里写图片描述

这里底部的小条就是透明的，其样式为：

    .ck-slideBox {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 36px;
        background: #000;
        filter: alpha(opacity=50);
        -moz-opacity: .5;
        opacity: .5;
        text-align: center;
        z-index: 10;
    }