如何在英雄图像上获得这种混合模式效果并修复导航菜单的不透明度？

Question

我试图在英雄图像和透明导航栏上实现这种混合模式效果，并将其溶解到英雄图像中。 我试图通过提供背景颜色和一些不透明度来制作透明的导航栏，但它看起来与我想要的不一样。

到目前为止，我所拥有的是：

这是代码：任何帮助将不胜感激。 谢谢你。

 .navbar { background: #000000 0% 0% no-repeat padding-box; opacity: 0.56; padding-bottom: 1.5rem; padding-top: 1.5rem; @media screen and (max-width: 425px) { padding-bottom: 0.5rem; padding-top: 0.5rem; } } &-collapse { justify-content: flex-end; @media screen and (max-width: 768px) { background: #402808 0% 0% no-repeat padding-box; .nav-item:last-child { display: none; } } } &-nav { align-items: center; } .nav-item { margin-right: 4rem; transition: all 0.2s; &:hover { .nav-link { color: #f1cd9d !important; } } @media screen and (max-width: 1366px) { margin-right: 3rem; } @media screen and (max-width: 1200px) { margin-right: 1rem; } @media screen and (max-width: 1024px) { margin-right: 1rem; } } } .hero { background: url("/assets/src/images/hero.png"); background-repeat: no-repeat; background-size: cover; background-position: center; width: 100%; height: 100vh; overflow: hidden; position: relative; margin-bottom: 10rem; .herowoman { left: 79.4rem; position: absolute; top: 35.3rem; } .row1 { margin-top: 18rem; justify-content: center; img { width: 251px; height: 192px; } @media screen and (max-width: 425px) { img { width: 155px; height: 118px; } } } .row2 { position: relative; h1 { &::after { content: ""; display: block; width: 0; height: 2px; background: #efefef; width: 5.5%; @media screen and (max-width: 425px) { width: 10.5%; } } } p { font-size: clamp(10rem, 24vw, 44rem); text-align: center; line-height: clamp(16rem, 22vw, 35rem); font-weight: bold; letter-spacing: 6.16px; color: #ffffff; opacity: 0.26; } .herowoman { width: 371px; height: 543px; position: absolute; top: -2.5rem; left: 49.5rem; } button { z-index: 99; position: fixed; right: 0rem; top: 56rem; width: 214px; } @media screen and (max-width: 425px) { h1 { font-size: 1.8rem; line-height: 6.5rem; } p { font-size: 11.3rem; line-height: 11.5rem; } } } .row3 { justify-content: center; position: relative; img { width: 371px; height: 543px; position: absolute; top: -12rem; left: 49.5rem; } p { font: normal normal bold 440px/457px Poppins; letter-spacing: 6.16px; color: #ffffff; opacity: 0.26; } } }

 <nav class="navbar navbar-expand-lg fixed-top"> <div class="container"> <a class="navbar-brand" href="/html/index.php"><img src="/assets/src/images/logo.png" alt="" class="img-fluid"></a> <button class="navbar-toggler x" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ms-auto me-auto"> <li class="nav-item"> <a class="nav-link navmenu-text" aria-current="page" href="/html/index.php">Home</a> </li> <li class="nav-item"> <a class="nav-link navmenu-text" href="/html/about.php">About</a> </li> <li class="nav-item "> <a class="nav-link navmenu-text" href="/html/services.php">services</a> </li> <li class="nav-item"> <a class="nav-link navmenu-text" href="/html/rooms.php">rooms</a> </li> <li class="nav-item"> <a class="nav-link navmenu-text" href="/html/gallery.php">gallery</a> </li> <li class="nav-item"> <a class="nav-link navmenu-text" href="/html/contact.php">Contact</a> </li> </ul> <li class="nav-item-last"> <a href="#" class=" d-flex"> <img src="../assets/src/images/location.svg" alt="" class="img-responsive"> <p class="nav-text">BHAIRAHAWA, RUPANDEHI</p> </a> <a href="#" class=" d-flex"> <img src="../assets/src/images/phone.svg" alt="" class="img-responsive"> <p class="nav-text">(718)432-6687</p> </a> </li> </div> </div> </nav> <section class="hero"> <div class="container"> <div class="row row1"> <img src="/assets/src/images/logo.svg" alt="" class="img-responsive"> </div> <div class="row row2"> <h1>A Superior Budget</h1> <p class="">HOTEL</p> <button class="btn btn-primary btn-text" onclick="window.location.href='/html/booknow.php'">BOOK NOW</button> </div> </div> <img src="/assets/src/images/herowoman.png" alt="" class="img-responsive herowoman"> </section>

Answer 1

您必须将 alpha 值添加到背景颜色。

例子：

.navbar {
  background: rgba(0, 0, 0, 0.8);
  padding-bottom: 1.5rem;
  padding-top: 1.5rem;
  backdrop-filter: blur(13px);
}

但是 IE 和 Firefox 不支持背景过滤器。 为了绕过你可以使用@support 并添加一个后备属性

.navbar {
 background: rgba(0, 0, 0, 0.8);
 padding-bottom: 1.5rem;
 padding-top: 1.5rem;
 backdrop-filter: blur(13px);

@supports (
       (-webkit-backdrop-filter: blur(13px)) or (backdrop-filter: blur(13px))
     ) {
       background: rgba(0, 0, 0, 0.0);
       backdrop-filter: blur(13px);
       -webkit-backdrop-filter: blur(13px);
     }
}