0

所以我有一个带有背景图像的不透明度设置的 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>
4

3 回答 3

5

我摆弄并得出的结论是，这就是我认为您需要的。

下面是你必须使用的 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;
}
于 2013-10-24T04:46:58.290 回答
1

只是为了更好地理解：

这个 CSS 改变了整个元素的不透明度（背景、边框、文本、包含子元素，...）

#container{
    background-color: #000;
    opacity: 0.5;
}

但是这个 CSS 改变了颜色的不透明度。而这种“修改”的颜色将用于背景。

#container{
    background-color: rgba(0, 0, 0, 0.5);
}
于 2013-10-24T06:42:57.963 回答
0

问题是一个孩子不能比它的父母更不透明。在这种情况下，我将使用 :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;
}
于 2013-10-24T04:52:41.737 回答