时间戳

首页 > 解决方案 > 如何让nav变黑变透明

html - 如何让nav变黑变透明

问题描述

我怎样才能像这样使导航变成黑色和透明/透视？

在此处输入图像描述

我尝试使用 rgba，但它使黑色变得更白

nav {
width:100%;
height: 3rem;
background-color:rgba(0,0,0,0.3);
}
<nav>Nav</nav>

标签： htmlcss

解决方案

你实际上已经在这样做了。您正在使用 rgba 颜色值，这已经是朝着正确方向迈出的一步。

RGBA 颜色值指定为：rgba(red, green, blue, alpha)。alpha 参数是一个介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

现在您只需要设置背景图像。尝试这个：

nav {
    width:100%;
    height: 3rem;
    background-color:rgba(0,0,0,0.7);
  }

  nav > p {
    color: white;
  }

  body {
    background-image: url("https://webneel.com/daily/sites/default/files/images/daily/10-2013/3-nature-photography-cherry-tree.jpg");
  }
<nav><p>Nav</p></nav>

推荐阅读