div加了opcity之后，為什么連文字也半透明了？如何只讓div半透明，文字正常顯示呀？

1 使用半透明背景色
2 使用偽元素

     .title-container{
            width: 100px;
            height: 50px;
            position: relative;
        }
        .title-container::before{
            content: '';
            width: 100%;
            height: 100%;
            display: block;
            /**
            background-color: rgba(0,0,0,.5);
            background-color: rgba(0,0,0,1);
            opacity: 0.5;
            **/
            position: absolute;
            left:0;
            right: 0;
            top:0;
            bottom:0;
        }
        
         <div class="title-container">
            <span>ABADE</span>
        </div>

opacity干掉

background: rgba(0,0,0,.5);

你不要給DIV OPACITY 用DIV 的背景rgba比如background：rgba(0,0,0,.3)來(lái)實(shí)現(xiàn)你要的效果

這就是opacity的特點(diǎn)，使元素透明，文字是元素的一部分，自然也透明了
答案我調(diào)整下，你用rgba:

background: rgba(0,0,0, 0.3)

這里講得很詳細(xì)
http://www.cnblogs.com/PeunZh...