html - 不透明容器内的文字变淡

标签 html css

<分区>

我有一个容器,我在 css 中将其不透明度设置为 0.6。 我在上面的容器中有另一个 div,其中有一些带有颜色的文本:白色说“我的文本”。现在的问题是这个文本正在变淡,因为我只希望外部容器不透明而不是文本变淡。有人可以帮忙吗?

下面是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; 
     }

最佳答案

这非常简单,您只需在具有此类的元素不透明的范围内添加一个类或 ID。

工作示例:

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

例如:

.not-opaque{
      opacity:1;
    }

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

关于html - 不透明容器内的文字变淡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35563138/

上一篇:CSS响应将div从右移到左下方和中心

下一篇:html - 向下移动 div 元素时,背景图像也会移动

相关文章:

javascript - Css 动画不适用于 JSON 列表

html - 第一个 div 位于我的导航栏中?

javascript - 我对 jquery css 方法有一些疑问

css - 改变条纹的颜色

php - PHP、HTML 文件的编辑器内拼写检查

javascript - 使用JQuery点击类 ".x"的div时触发事件

javascript - 应用css : "overflow: hidden;" 时查看文本的顶部

html - 如何更改选择标签上的向下箭头

jquery - 在 jQuery 中获取 CSS 规则的百分比值

html - CSS 网格布局最后一项中心