时间戳

首页 > 解决方案 > 我如何在我的导航栏上添加一个半透明的背景，同时在我的整个页面上有一个蓝色背景

html - 我如何在我的导航栏上添加一个半透明的背景，同时在我的整个页面上有一个蓝色背景

问题描述

所以我的网站有这个背景。还有一个导航栏，上面有我的名字和其他一些东西。我想让这个导航栏的背景是半透明的，这样我就可以看到后面。我正在使用不透明度：0.5；但这使它变成了我不想要的白色。任何帮助，将不胜感激

标签： htmlcss

解决方案

有几种方法可以实现 - 一个常见的解决方案是使用半透明的 PNG 文件来产生所需的效果。

但是，如果您不能使用 PNG（即，您需要使用 JPG）作为导航栏的背景，另一种方法是在导航栏上定义一个 伪元素。

您可以使用relative和absolute定位如下所示将这个伪元素放置在导航元素的内部和后面，并将应用样式应用opacity到伪元素以实现透明效果：

body {
  background:blue;
}

nav a {
  color:red;
  background:white;
}

nav {
  padding:1rem;
  box-sizing:content;

  /* Required for correct pseudo element placement */
  position:relative;
}

/* Define pseduo element for nav element */
nav::before {
  content:"";
  display:block;
  position:absolute;

  top:0;
  left:0;
  
  /* Stretch to fill nav */
  width:100%;
  height:100%;
  
  /* Place behind nav content */
  z-index:-1;
  
  /* Set transparency */
  opacity:0.5;
  
  /* The background image */
  background:url(https://i.imgur.com/BZ6HTf5.jpg);
}
<nav>
  <a href="#">Menu item</a>
  <a href="#">Menu item</a>
  <a href="#">Menu item</a>
</nav>

推荐阅读