CSS：无法使用@media max-width 更改不透明度
Posted
技术标签:
【中文标题】CSS：无法使用@media max-width 更改不透明度【英文标题】：CSS: Unable to change opacity using @media max-width 【发布时间】：2021-12-26 10:17:10 【问题描述】：在组合一个具有可折叠页眉的网页时，当页面的桌面版本向下滚动时会淡出一个大徽标，并且应该用较小的徽标替换一个不同的位置。但是，我遇到了一个问题，即较小的徽标仍然是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/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;" ></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>【问题讨论】：
【参考方案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 更改不透明度的主要内容，如果未能解决你的问题，请参考以下文章
如何让@media(max-width 425px) 单独工作，而不是跟随@media(max-width 768px)
Vue.js：无法使用带有 CSS 媒体查询的侧边栏隐藏 div