html - CSS 增加嵌套 span 标签的不透明度

Question

我不希望不透明度影响我在 div 中的一些文本；我希望文本 100% 完全不透明，但背景颜色为 50% 不透明。

到目前为止我还没有成功。

HTML:

        <div class='photo'>
            <div class='image'><a href='#'><img src='https://i.imgur.com/PC68FSTb.jpg' alt='profile picture' width='300' height='300'></a></div>
            <div class='photo-name'><span>Name</span></div>
        </div>

CSS:

.photo {
    border-radius: 6px;
    border: 1px solid #ccc;
    width: 298px;
    height: 298px;
    margin-top: 10px;
    margin-left: 10px;
    float: left;
    overflow: hidden;
    position: relative;
}

.photo-name {
    position: absolute;
    bottom: 30px;
    width: 100%;
    padding: 0.5em;
    text-align: center;
    background-color: #666666;
    color: #fff;
    opacity: 0.5;
}

.photo-name > span {
    opacity: 1;
}

结果:https://jsfiddle.net/w71677jm/

Answer 1

可以使用RGBA颜色

.photo-name {
    position: absolute;
    bottom: 30px;
    width: 100%;
    padding: 0.5em;
    text-align: center;
    /*background-color: #666666;*/
    background-color:rgba(102,102,102,0.5);
    color: #fff;
    /*opacity: 0.5;*/
}