Question

有人可以告诉我如何在不更改导航条上文本的不透明度的情况下更改此导航条的不透明度吗？另外，有人可以告诉我如何更改导航栏上文本的颜色吗？

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>

**Above mentioned is a bootstrap navbar code. Could someone please tell me how to change the opacity of this navbar without changing the opacity of the text on navbar?Please also tell me how to change the color of text on navbar?**

Answer 1

只需更改导航栏（rgba）的背景颜色。

.navbar {
   background: rgba(255, 0, 0, 0.5); // 0.5 is opacity
}

文档：https://www.w3schools.com/cssref/func_rgba.asp

Answer 2

要使导航栏为半透明，而又不影响内容，您可以使用半透明颜色。

您需要做两件事：

从导航栏中删除navbar-light类-这就是当前添加颜色的原因。
添加具有所需颜色的自己的CSS。您可以使用RGBA颜色指定不透明度，也可以指定十六进制中的透明通道，例如

background-color: rgba(248, 249, 250, 0.5); /* RGBA colour with 0.5 (i.e. 50%) 
background-color: rgb(248 249 250 / 0.5); /* RGB colour with 0.5 (i.e. 50%) opacity  */
/* OR */
background-color: #f8f9fa80; /* HEX colour with HEX 80 (i.e. 50%) opacity  */

请注意，由于Bootstrap类的设置方式，您还需要使用!important（不幸的是-这通常是不好的做法！）

nav.navbar {
  background-color: rgb(248 249 250 / 0.5)!important
}

更改导航链接的颜色：这也是由Bootstrap类定义的，因此最好的方法是使用元素检查器查找现有的类并覆盖它们-请参见工作片段在下面。

下拉菜单如果您还想更改下拉菜单的文本颜色和不透明度，则可以添加以下内容：

.dropdown-menu{  background: rgba(255, 255, 255, 0.5);  }
.dropdown-item { color: #green;  }

工作示例：

nav.navbar {
  background-color: rgb(248 249 250 / 0.5)!important;
}

/* OVERRIDE BOOTSTRAP NAV CLASSES */
.navbar-nav .nav-link {
    color: red;
}
.navbar-nav .active>.nav-link, .navbar-nav .nav-link.active, .navbar-nav .nav-link.show, .navbar-nav .show>.nav-link {
    color: blue;
}

/* OVERRIDE BOOTSTRAP DROPDOWN NAV CLASSES */
.dropdown-item {
    color: green;
}   
.dropdown-menu {  
    background: rgba(255, 255, 255, 0.5);  
}

/* For demo only to show transparency */
.page {
  background: url(http://placekitten.com/500/500) repeat;
  height: 100vh
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="page">
  <nav class="navbar navbar-expand-lg">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
</div>

Answer 3

签出rgba（）：

https://www.w3schools.com/cssref/func_rgba.asp

<body>
    <img id = 'img1' src = '1.png' onclick="clickImg(1)">
    <img id = 'img2' src = '2.png' onclick="cliclImg(2)">
</body>

<script>

    let compared = 0;

    function clickImg(img_number){
        if (img_number == 1)
            compared = 1;
        else
            compared = -1; 
    }

    function compare(n1,n2){
        document.getElementById('img1').src = '' + n1 + '.png';
        document.getElementById('img2').src = '' + n2 + '.png';
        
        // Here I should wait for a user click on one of the images

        result = compared;  
        compared = 0;
        return result;
    }

    array = [0,1,2,3,4,5,6,7];
    array.sort(compare);
</script>

更改导航栏的不透明度而不更改导航栏上文本的不透明度

3 个答案: