CSS: 无法使用@media max-width 更改不透明度

Question

将具有可折叠 header 的网页和桌面版页面向下滚动时淡出的大徽标放在一起时，假设将在不同位置替换为较小的徽标。但是，我运行遇到了一个问题，即较小的徽标保持在 opacity 的起始值。如果我从 opacity: 0; 开始它会保持透明，如果我从 opacity:1; 开始它会保持不透明。（澄清一下，小徽标旨在始终出现在较小的移动显示器上，但从 min-width:992px 开始应该仅在 header 折叠时出现，因为它取代了较大的 desktop-only 标志。)

换句话说，我对不透明度属性的媒体查询 none 得到了确认。媒体查询 中的其他规则是 ，例如 font-size。我不明白为什么 opacity 会被忽略。当我使用 Developer Tools 检查 CSS 时，我什至找不到被覆盖的划掉的值，这令人困惑。

我正在使用 Bootstrap 5，但即使我取消链接 Bootstrap 的 Javascript 和 CSS 它也不会影响任何与徽标不透明度相关的声明.

我忽略了什么？

.navbar {
    padding-bottom: 0px;
}
.nav-link {
    font-size: 20px;
}
nav#main-nav {
    background-color: #fff !important;
}
nav#main-nav::after /*for header bg images*/ {
    content: "";
    top: 0;
    left: 0;
    bottom: 42px; /* this should match the height of the nav bar */
    right: 0;
    position: absolute;
    z-index: -1;
    opacity: 1.0;
    transition: opacity 0.4s;
    background-image:
        url("data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAABIAAAAICAYAAAD0g6+qAAAAM0lEQVQokWNQnPb5PwMaUJz2+T+6OEExbJLobKLESDUIp7oBMQg5TCh2EX0MQo9acqIfABEwl6J1tl/FAAAAAElFTkSuQmCC"), 
        url("https://lorempixel.com/1116/240/nature/1");
    background-repeat: no-repeat;
    background-position: center 60%, center 40%;
    background-size: 28%, cover;

    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
nav#main-nav.desktop-collapse-on-scroll::after {
    opacity: 0.0;
}
.navbar-shadow {
    transition: box-shadow 0.4s;
    box-shadow: 0px 0px 12px -12px #3E5E9E;
}
.desktop-collapse-on-scroll .navbar-shadow {
    box-shadow: 0px 10px 12px -12px #3E5E9E;
}
.navbar-brand {
    transition: opacity 0.2s; /* fade-out speed */
}
.desktop-collapse-on-scroll .navbar-brand {
    transition: opacity 1.0s; /* fade-in speed */
}
.navbar-brand a img {
    width: 202px;
    height: 31px
}

/* media queries that aren't all taking effect */
@media (max-width: 991px) {
    nav#main-nav::after {
        background-image: none;
    };
    .navbar-brand {
        opacity: 0; /* is NOT working */
    };
}
@media (min-width: 576px) /*sm*/ {
    
}
@media (min-width: 768px) /*md*/ {
    
}
@media (min-width: 992px) /*lg*/ {
    .nav-link {
        font-size: 14px; /* is working */
    };
    .desktop-collapse-on-scroll .navbar-brand {
        opacity: 1; /* is NOT working */
    }
}
@media (min-width: 1200px) /*xl*/ {
    .nav-link {
        font-size: 17px; /* is working */
    };
    nav#main-nav::after {
        background-position: center 12%, center 38%;
    };
}
@media (min-width: 1400px) /*xxl*/ {
    
}

.nav-link {
    overflow-wrap: break-word;
    white-space: nowrap;
    overflow: hidden;
    height: 42px;
    padding-top: 0.6rem;
}
.navbar-light .navbar-nav .nav-link:link {background-color: #B3D1F4; color: #3D6ECF;}
.navbar-light .navbar-nav .nav-link:visited {background-color: #B3D1F4; color: #3D6ECF;}
.navbar-light .navbar-nav .nav-link:hover {}
.navbar-light .navbar-nav .nav-link:focus {}
.navbar-light .navbar-nav .nav-link:active {}
ul.dropdown-menu.show {
    background-color: #BDE8FF;
}
.dropdown-item {
    color: #3E5E9E;
}

.navbar-collapse {
    flex-grow: 0;
}
nav .dropdown-toggle::after {
    margin-left:  0em;
}
nav .btn {
    word-break: keep-all;
}
nav .mr-lg-0 {
    margin-right: 0 !important;
}

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
        <meta name="generator" content="Hugo 0.84.0">
        <title>Troubleshooting min-width</title>
        <script
              src="https://code.jquery.com/jquery-3.6.0.min.js"
              integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
              crossorigin="anonymous"></script>
        <!-- Bootstrap core CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
        
        <style>
            #headerResizer {
                height: 192px; /* taller height which will shrink on scroll (using JS) */
            }
        </style>

    </head>
    <body class="py-0">
        <div class="display-size-indicator"></div>

<main>

    <div class="container">
    <nav id="main-nav" class="navbar navbar-expand-lg navbar-light bg-light sticky-lg-top flex-column" style="z-index: 2000;">
        <div class="container-fluid d-flex align-items-stretch">
            <a class="navbar-brand" href="/"><img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAABIAAAAICAYAAAD0g6+qAAAAM0lEQVQokWNQnPb5PwMaUJz2+T+6OEExbJLobKLESDUIp7oBMQg5TCh2EX0MQo9acqIfABEwl6J1tl/FAAAAAElFTkSuQmCC" style="height:32px; image-rendering: pixelated; image-rendering: crisp-edges;" alt="logo"></a>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">

                <!-- Search Field & Button -->
                <form class="d-flex">
                    <input class="form-control form-control-sm me-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-sm btn-outline-primary btn-light" type="submit">Search</button>
                </form>

                <!-- Log In & Register Modal Button -->
                <button type="button" class="btn btn-primary btn-sm mx-lg-2 mb-2 mb-lg-0 mr-lg-0 d-block" data-bs-toggle="modal" data-bs-target="#modalForm">
                    Log In / Register
                </button>
                <!-- Modal -->
                <div class="modal fade" id="modalForm" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">User Login</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <form>
                                    <div class="mb-3">
                                        <!-- <label class="form-label">Email Address</label> -->
                                        <input type="text" class="form-control" id="username" name="username" placeholder="Email" />
                                    </div>
                                    <div class="mb-3">
                                        <!-- <label class="form-label">Password</label> -->
                                        <input type="password" class="form-control" id="password" name="password" placeholder="Password" />
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input" id="rememberMe" />
                                        <label class="form-check-label" for="rememberMe">Remember Me</label>
                                    </div>
                                    <div class="modal-footer d-block">
                                        <p class="float-start"><a href="#">Register</a></p>
                                        <p class="float-start mx-4"><a href="#">Reset Password</a></p>

                                        <button type="submit" class="btn btn-warning float-end">Log In</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>

        <div class="collapse navbar-collapse" id="headerResizer">
        </div>

        <div id="navbarSupportedContent" class="collapse navbar-collapse nav-fill w-100">
            <ul id="scrollGetNavBarHeight" class="navbar-nav nav-fill w-100 me-auto mb-2 mb-lg-0 navbar-shadow">

                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                
            </ul>
        </div>
    </nav>

        <div style="width:100%; min-height:2000px; background-color:#eee; padding:10px; margin-bottom:50px; line-height:6; font-size:16px">
            Scrollable content<br/>Scrollable content<br/>Scrollable content<br/>Scrollable content<br/>
            Scrollable content<br/>Scrollable content<br/>Scrollable content<br/>Scrollable content<br/>
            Scrollable content<br/>Scrollable content<br/>Scrollable content<br/>Scrollable content<br/>
            Scrollable content<br/>Scrollable content<br/>Scrollable content<br/>Scrollable content<br/>
            Scrollable content<br/>Scrollable content<br/>Scrollable content<br/>Scrollable content<br/>
        </div>


        
</main>

<script> // For resizing the header on scroll. Original code credit: https://jsfiddle.net/jezzipin/JJ8Jc/
$(function(){
    $('#headerResizer').data('size','big');
});

$(window).scroll(function(){
    if($(document).scrollTop() > 0)
    {
        if($('#headerResizer').data('size') == 'big')
        {
            $('#headerResizer').data('size','small');
            $('#headerResizer').stop().animate({
                height:'0px' // min height of resizer
            },400); // time
            $('#main-nav').addClass('desktop-collapse-on-scroll');
        }
    }
    else
    {
        if($('#headerResizer').data('size') == 'small')
        {
            $('#headerResizer').data('size','big');
            $('#headerResizer').stop().animate({
                height:'192px' // max height of resizer
            },400); // time
            $('#main-nav').removeClass('desktop-collapse-on-scroll');
        }  
    }
});
</script>   
</body>
</html>

Answer 1

您的 CSS 中存在语法错误，CSS 中的 } 后没有 ;。

如果您编写有效 CSS 您的规则将应用于元素。

nav#main-nav::after {
    background-image: none;
} /* NO ; here */
.navbar-brand {
    opacity: 0; /* is NOT working */
} /* NO ; here either */

CSS: 无法使用@media max-width 更改不透明度

CSS: Unable to change opacity using @media max-width

css

media-queries

responsive-design

twitter-bootstrap

bootstrap-5