如何创建具有不透明度的父 div，同时将文本的不透明度保持在 100% [重复]
Posted
技术标签:
【中文标题】如何创建具有不透明度的父 div，同时将文本的不透明度保持在 100% [重复]【英文标题】：How to create parent div with opacity while keeping the opacity of the text at 100% [duplicate] 【发布时间】：2013-11-02 15:11:17 【问题描述】：所以我有一个不透明度设置为背景图像的 div。我希望悬停 div 时弹出的文本保持 100%。谁能帮我解决这个问题？任何帮助将不胜感激！
DEMO
<body>
<div id="container">
<div id="container_inner">
<div id="container_txt">
<p><a href="#">WORLD OF WARCRAFT</a></p>
<p id="p_txt">This is a simple World of Warcraft styled div that has been done implementing html, css, and css3</p>
</div>
</div>
</div>
</body>
【问题讨论】：
你的意思是什么我希望悬停div时弹出的文本保持100% 在你的演示中，你能不能只删除opacity属性，并减少背景颜色的alpa？你已经用 rgba 设置了它，使用了半透明的不透明度。所以我很困惑
@PastorBones,-Koala 我刚刚明白了这个问题，如果你们看到了，这不是重复的..
@Mr.Alien 这是重复的，因为它是一个常见问题。说真的，请尝试使用谷歌搜索或使用本网站右上角的搜索框。
@PastorBones 同样，这不是一个完全的骗局，这里我们处理的是不透明图像，我们不能使用rgba() 使图像不透明
【参考方案1】：
不过，我摆弄并得出的结论是，我认为这就是您所需要的。
以下是您必须使用的 CSS。
小提琴：Click HERE
Demo（透明背景）
html, body
margin: 0;
height: 100%;
background-color: #575980;
#container
width: 200px;
height: 300px;
cursor: pointer;
overflow: hidden;
margin: 100px auto;
border: 1px solid #333;
background-color: #000;
box-shadow: 0px 2px 8px #111;
#container_inner
opacity: .8;
margin: auto;
width: 200px;
height: 300px;
transition: .5s;
position: relative;
background-color: #FFF;
background-image: url('http://static.mmo-champion.com/mmoc/images/news/2010/march/ss973.jpg');
background-size: 200% 100%;
background-position: 60% 50%;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5);
#container_inner:hover, #container_txt:hover
opacity: 1;
#container_txt
color: #fff;
height: 0px;
bottom: 0px;
width: 200px;
transition: .2s;
position: absolute;
font: normal 1em calibri;
background-color: rgba(0, 0, 0, 1);
#container_inner:hover #container_txt
height: 100px;
opacity: 1;
p
top: -5px;
padding: 0px 10px;
position: relative;
p a
color: #fff;
text-decoration: none;
#p_txt
top: -15px;
position: relative;
font-size: 12px;
【讨论】：
不错的尝试，但黑色弹出窗口不透明 好的，所以您希望黑色弹出窗口透明且文本为 100 %..对吗？？ 刚刚将演示添加到您的答案并投票:) 背景色：rgba(0, 0, 0, 0.5); //改变不透明度！！！ ♥ 感谢您的帮助。看起来很棒！【参考方案2】：问题是孩子不能比其父母更不透明。在这种情况下，我会使用 :after 伪元素来创建背景，而不是背景图像，然后将背景图像/不透明度/其他任何东西放在上面，然后不理会父元素。
我修改了你的小提琴来做到这一点（http://jsfiddle.net/srfGg/4/），但主要的关键是：
#container_inner:after
opacity:0.8;
transition:.2s;
content: "";
display:block;
color:#FFF;
height:100%;
width:100%;
position: aboslute;
top:0;left:0;right:0;bottom:0;
background-color: #FFF;
background-image: url('http://static.mmo-champion.com/mmoc/images/news/2010/march/ss973.jpg');
background-size: 200% 100%;
background-position: 60% 50%;
#container_inner:hover:after, #container_txt:hover
opacity: 1;
【讨论】：
【参考方案3】：只是为了更好地理解：
此 CSS 更改整个元素的不透明度（背景、边框、文本、包含子元素，...）
#container
background-color: #000;
opacity: 0.5;
但是这个 CSS 改变了颜色的不透明度。而这种“修改”的颜色将用于背景。
#container
background-color: rgba(0, 0, 0, 0.5);
【讨论】：
以上是关于如何创建具有不透明度的父 div，同时将文本的不透明度保持在 100% [重复]的主要内容，如果未能解决你的问题，请参考以下文章