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颜色

＆＃13;

.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;*/
}

＆＃13;

Answer 2

好的罗伯特。怎么样。

解决方案是

rgba(102,102,102, 0.5);

rgba =红色，绿色，蓝色，alpa通道

（102,102,102）=＃666666

0.5 =您的50％透明

查看下面的SO片段或此分叉小提琴JSFiddle

希望这有帮助！

最佳，

添

.photo-name {
	position: absolute;
	bottom: 175px;
	width: 300px;
	text-align: center;
	background-color: rgba(102,102,102, 0.5);
	color: #fff;
    padding-top:.5em;
    padding-bottom:.5em;
}

<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增加嵌套span标记的不透明度

2 个答案: