Question

我已经查看了StackOverflow和其他网站上的很多帖子，但我似乎无法弄清楚如何让我的导航栏处于半透明的自举状态。我不希望导航栏中的单词是半透明的，但我只想要导航栏。我还想对背景图片应用不透明度。我还想增加＆＃34;我的应用程序＆＃34;文本而不改变链接的大小。

继承我的代码：

http://goo.gl/P8jpgG

Answer 1

如您所知，父元素的CSS容量也适用于所有子元素（并且有充分理由，如果不是这样，则无用）。

至于你的问题，我认为你所追求的是CSS背景颜色不透明度。这是您可以使用RGBA颜色实现的 - this是可用于创建具有所需不透明度的背景的生成器之一。

这是RGBA背景颜色的一个例子：

background-color: rgba(215, 44, 44, 0.2);
background: rgba(215, 44, 44, 0.2);
color: rgba(215, 44, 44, 0.2);

另一方面，如果您想要使用不透明度放置背景图像，可以尝试以下方法：

div {
  width: 500px;
  height: 150px;
  display: block;
  position: relative;
}

div::after {
  content: "";
  background: url(image.jpg);
  opacity: 0.8;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

基本上它添加了一个左上角定位的伪元素。虽然在这种情况下，我不确定为什么你不会生成PNG文件（例如在Photoshop中）已设置透明度，然后只使用该图像作为背景。

Answer 2

如果您希望导航栏透明，只需将CSS应用于它。

.navbar-default {
    background-color: transparent;
    border-bottom: 1px solid transparent;
}

如果您使用Bootstrap Scrollspy并且您希望活动菜单项也是透明的，则需要将CSS应用于那些。

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    background-color: transparent;
}

要更改“我的应用”文字的字体大小，您可以更改navbar-brand类的CSS，如

.navbar-brand {
    font-size: 30px;
}

添加半透明度以引导导航栏和照片，并增加字体大小

2 个答案: