Question

<!-- Navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#">GemCode [img] </a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <form class="navbar-form navbar-left" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-default">Submit</button>
                    </form>
                </li>
            </ul>
        </div>
    </div>
</nav>

这是我的固定导航栏的HTML。

.navbar-fixed-top {
    background-color: #ecf0f1;
    border-radius: 10px;
    font-family: Arial;
    opacity: 0.6;
    height: 10%;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

这是上面HTML的CSS。

我想要实现的是透明背景，文字完全不透明。我尝试添加：

a. { 
    opacity: 1.0;
}

这没用。我正在使用Bootstrap，我不确定如何使文本不透明。

Answer 1

您的方法存在的问题是，您正在更改整个包含元素（包括其子元素）的不透明度。

尝试更改其背景颜色的alpha，而不是更改包含元素的不透明度以影响其背景不透明度。这需要您将颜色从十六进制转换为rgba格式（工具可在线获取）。以下是黑色背景，不透明度为50％的示例：

.navbar-fixed-top {
    background-color: rgba(0,0,0,.5);
    ...
}

此时，您的问题将立即解决，但您也可以更改容器内部元素的不透明度或alpha值，并根据需要查看效果：

.navbar-fixed-top a {
    color: rgba(0,0,0, .8);
}

如何使透明div中的文本不透明？

1 个答案: