CSS：無法使用@mediamax-width更改不透明度-有解無憂

將具有可折疊標題的網頁和一個大徽標放在一起時，該徽標會在頁面的桌面版本向下滾動時淡出，并且應該在不同位置替換為較小的徽標。但是，我遇到了一個問題，即較小的徽標仍然是opacity. 如果我從它開始它opacity: 0;仍然是透明的，如果我從它開始opacity:1;它仍然是不透明的。（澄清一下，小徽標旨在始終出現在較小的移動顯示幕上，但從頭開始min-width:992px應該只在標題折疊時出現，因為它取代了較大的僅限桌面的徽標。）

換句話說，我對 opacity 屬性的所有媒體查詢都沒有得到確認。媒體查詢中的其他規則是，例如font-size. 我不明白為什么opacity會被忽略。當我使用開發人員工具檢查 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/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 >Email Address</label> -->
                                        <input type="text" class="form-control" id="username" name="username" placeholder="Email" />
                                    </div>
                                    <div class="mb-3">
                                        <!-- <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>

uj5u.com熱心網友回復：

您的 CSS 中有語法錯誤，CSS 中沒有;a 之后}。

如果您撰寫了有效的 CSS，您的規則將應用于元素。

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/360339.html

標籤：css 推特引导响应式设计媒体查询 bootstrap-5

上一篇：BootstrapFlexbox水平滾動元素不起作用

下一篇：我如何使用Bootstrap5為100以外的值設定相對于視口的高度？