Question

我希望图片顶部的文字不要具有其父级所具有的不透明度而不改变布局。

HTML

<div class="container">
    <div class="imageHolder">
        <img src="http://www.hairstylermall.com/wp-content/uploads/short-layered-hairstyles-2013-2-200x300-short-layered-hairstyles-2013-20140813122004-53eb90341bf7e-440x425.jpg">
        <div class="messageBox">
            <h4>Something</h4>
            <p>This is dummy</p>
        </div>
    </div>
</div>

CSS

.imageHolder {
    position:relative;
}
.messageBox {
    position:absolute;
    bottom:20px;
    width:70%;
    background-color:#999;
    padding:10px;
    left:20px;
    opacity:0.5;
}

请检查此fiddle。

请纯HTML和＆amp; CSS

Answer 1

只需将背景设置为 rgba ，将文本设置为正常的颜色：

.messageBox{
   background-color: rgba(153, 153, 153, 0.5);
   color:#999;
 }

应该有用。

另请参阅：HEX to RGBA Converter 他会将您的Hexcode（＃999）转换为RGB（A）Colorcode。

Answer 2

是的，可以使用RGBA，

.messageBox {
    position:absolute;
    bottom:20px;
    width:70%;
    background-color:rgba(153, 153, 153, 0.5);
    padding:10px;
    left:20px;
}

另请参阅：http://css-tricks.com/rgba-browser-support/

文字不应该拥有其父母的不透明度

2 个答案: