不透明容器内的文字变淡

时间:2016-02-22 20:25:58

标签: html css

我有一个容器,我在css中将不透明度设置为0.6。 我在上面的容器中有另一个div,我有一些颜色的文本:white say" MY TEXT"。现在的问题是这个文本正在逐渐消失,因为我只希望外部容器以不透明度而不是文本淡出。有人可以请帮助。

以下是html代码:

<div id='cover-part' style='text-align:center1;padding:15px'>
<div id='opaque-cover-part'>
<div id='cover-part-text'><span>THIS TEXT SHOULD NOT FADE</span></div>
</div>

以下是CSS

#cover-part{
    position: relative;
    background: url(posts/images/1.jpg) no-repeat 0 center, linear-    gradient(white, black);
    height:250px;
    }


 #cover-part-text{
    position:relative; 
    font-size: 30px;
    color:#FFFFFF;
    left: 0px;
    bottom:0px;
    font-weight:bold;
    display:block;
    z-index:2;
    font-family: helvetica, arial, sans-serif;

    height:100px;
    width:100%;

    padding-left:15px;
    padding-top:15px; 
    }

 #opaque-cover-part{
     position: absolute;
    left: 0px;
    bottom:0px;
    height:100px;
    width:100%;
    background:linear-gradient(black, black);
    opacity:0.6;
    filter:alpha(opacity=50); 
     z-index:1; 
     }

2 个答案:

答案 0 :(得分:0)

非常简单,您可以在您的范围内添加一个类或ID,其中包含此类的元素不会被删除。

工薪示例:

https://plnkr.co/edit/5jbyZv609LEaKBctKFC1?p=preview

例如:

.not-opaque{
      opacity:1;
    }

<span class='not-opaque'>THIS TEXT SHOULD NOT FADE</span>

答案 1 :(得分:0)

只需将opacity: 1;添加到内部容器中;

https://plnkr.co/edit/6o33hFTwmBoAv16alfca