所以我有一个div,它的不透明度设置了背景图像。我希望悬停div 时弹出的文本保持 100%。有人可以帮助我解决这个问题吗?任何帮助将不胜感激!
演示
<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>
我摆弄并得出结论,我认为这就是你需要的。
下面是您必须使用的 CSS。
小提琴:点击这里
演示(透明背景)
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;
}
只是为了更好地理解:
此 CSS 更改了完整元素(背景、边框、文本、包含子元素等)的不透明度
。#container{
background-color: #000;
opacity: 0.5;
}
但是这个CSS改变了颜色的不透明度。这种"修改"的颜色将用于背景。
#container{
background-color: rgba(0, 0, 0, 0.5);
}
问题是孩子不能比它的父母更不透明。 在这种情况下,我会使用 :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;
}