background:rgba（r,g,b,opacity）

公有云私有云

于 2018-08-28 10:52:06 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_39579242/article/details/82144221

博客介绍了使用background:rgba（r,g,b,opacity）设置半透明背景色，指出其在ie上兼容性不佳，不过能一定程度解决让节点内元素不透明、仅背景色透明的问题，还提及了布局代码和样式设置。

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

background:rgba（r,g,b,opacity）是设置为半透明的背景色，ie兼容性不是很好

一定程度上解决，节点里面的元素不透明，单单是背景色透明了

布局代码如下：

<div class="masked">
       <img src="images/intel.web.368.207.1.jpg" alt="" class="img-responsive">
       <div class="mask">
            <h5>解密2合1电脑</h5>
            <p>搭载英特尔处理器的2合1电脑，助你高效工作的同时带给你灵活可触控的平板体验。</p>
       </div>
</div>

样式设置如下：

        .masked {
            position: relative;
        }
        .masked .mask {
            position: absolute;
            top: 80%;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0,0,0,.5);
            transition: top .15s linear;
            color: #ffffff;
        }
        .masked .mask:hover {
            top: 0;
        }