你写道：
导航栏和下面的任何元素看起来也与卡片图像不同，所有周围的元素都是不可见的。
这是否意味着当您在carousel 中使用带有img 标记的materialboxed 类时，当您单击图像时，页面的其余部分不会变得不可见/变黑？
也许您的文档中有更多未共享的代码？
我能够使用以下代码在您的轮播中实现materialboxed 效果：
<!DOCTYPE html>
<html>
<head>
<!-- IMPORT MATERIALIZE CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">Logo</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">JavaScript</a></li>
</ul>
</div>
</nav>
<div class="carousel">
<a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1" class="materialboxed"></a>
<a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2" class="materialboxed"></a>
<a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3" class="materialboxed"></a>
<a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4" class="materialboxed"></a>
<a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5" class="materialboxed"></a>
</div>
<!-- IMPORT MATERIALIZE JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- INIT CAROUSEL -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.carousel');
var instances = M.Carousel.init(elems);
});
</script>
<!-- INIT MATERIALBOXED -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.materialboxed');
var instances = M.Materialbox.init(elems);
});
</script>
</body>
</html>
结果见screen grab。
编辑 2020 年 10 月 23 日：
以下几个假设：
materialize.js 现在是 html 文件的本地文件，而不是从 CDN 导入的。此外，<nav> 标签现在被包裹在一个带有class="navbar-fixed" 和id="fixed-nav" 的div 中：
<div id="fixed-nav" class="navbar-fixed">
<nav>
{...}
</nav>
</div>
在 cmets 中，OP 澄清说他不喜欢使用 materialboxed + carousel + navbar-fixed 时的行为。
一种解决方案是在打开轮播图像时从 <nav> 的包装 div 中删除类 navbar-fixed，并在关闭时将其添加回来。
materialize.js 的第 3590 行和第 3722 行分别是打开和关闭类为 materialboxed 的图像的函数。在这些函数中，您可以添加以下内容以从 id fixed-nav 的包装器中删除/添加 navbar-fixed：
open() 函数内部：
// remove navbar-fixed
let fixedNav = document.getElementById('fixed-nav')
fixedNav.classList.remove('navbar-fixed')
close() 函数内部：
// add navbar-fixed
let fixedNav = document.getElementById('fixed-nav')
fixedNav.classList.add('navbar-fixed')