个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我是 HTML/CSS 新手。我创建了这个侧边栏，当单击时，它会从左侧滑动，滑动时会显示不透明背景。不幸的是，图像显示在不透明覆盖层的顶部，我找不到让它停止在不透明覆盖层上如此明亮地显示的问题。我正在为我们的学科老师要求的一个项目做这个。
我已经尝试过使用 z-index，但我并不是真正的专家，因为我是初学者，我从 w3schools.com 等网站获得帮助
<style>
body {
margin: 0;
font-size: 32px;
font-family: Arial, Helvetica, sans-serif;
}
.header {
background-color: #fffff;
padding: 30px;
text-align: center;
}
#navbar {
overflow: hidden;
padding: 16px 14px;
background-color: #72cef6;
z-index: 90;
}
}
#navbar a:hover {
background-color: #ccebff;
color: #666666
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 60px;
}
</style>
</head>
<body>
<div id="navbar">
<style>
body {
font-family: "Calibri", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #ffffff;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 18px;
color: #ff9966;
display: block;
transition: 0.4s;
}
.sidenav a:hover {
color: #99d6ff;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 22px;
margin-left: 50px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="Moderator's Profile.html">Modertor's Page</a>
<a href="#">Members and Officers</a>
<a href="Constitution and By Laws.html">Constitution and By Laws</a>
<a href="#">Activity Layout</a>
<a href="about.html">Info.</a>
</div>
<span style="font-size:18px;cursor:pointer" onclick="openNav()"><font
color="#72cef6">___</font><img src="menu.png" height="24"></span>
<style>
element.style {
display: block;
}
.mm-open .mm-fullscreen-bg {
cursor: pointer;
background-color: rgba(0,0,0,0.55);
position: fixed;
top: 0;
left: 0;
overflow: hidden;
width: 100%;
height: 100%;
z-index: 999;
display: none;
}
</style>
<div class="mm-fullscreen-bg" style="display: block;"></div>
<script>
function openNav() {
document.getElementById("mySidenav").style.width
="250px";document.body.style.backgroundColor =
"rgba(0,0,0,0.4)";object.style.zIndex="999";
}
function closeNav() {
document.getElementById("mySidenav").style.width =
"0";document.body.style.backgroundColor
= "white";
}
</script>
</div>
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
我只想达到this.的结果.
哦，不要介意侧面导航上提供的链接。
最佳答案
我假设您在 w3schools 上使用此示例
因此，您可以实现此目的，为您的 img 标签提供一个 id 比如说 一些图像
<img id='some-image' src="https://via.placeholder.com/150">
然后将其添加到 openNav();
document.getElementById('some-image').style.opacity = "0.2";
关闭时，您可以在 closeNav() 上恢复为白色
document.getElementById('some-image').style.opacity = "1";
我为你创建了jsfiddle示例，请检查
https://jsfiddle.net/whatatimetobealive/4wack0y1/11/
如果您提供所有代码，我也可以为您提供帮助，但目前 body 部分缺失，因此很难假设您那里到底有什么。
希望对你有帮助...
关于overlay - 有没有办法阻止图像显示在不透明覆盖层之上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53920199/
26
4
0
我刚开始学习JSP技术，遇到了瓶颈。 如何从 JSP 声明 block ？ 这不起作用: ... 服务器说没有“out”。 U: 我确实知道如何使用返回字符串的方法重写代码，但是有没有办法在 ？
在一个字段中，我想设置一个具有自定义过滤器的自定义分析器-着眼于词干-因此，“闪存卡”和“闪存卡”的词根相同，因此返回的结果相同 当我运行以下查询时，我的命中率很高，但是“闪存卡”和“闪存卡”各自返回
快速提问。 我有一个通过 PInvoke 使用 native DLL 的应用程序，这个 DLL 可能会调用 PostQuitMessage()。 如何避免？ (因为我的应用程序不应该关闭) 我试过 A
一些给定的 HTML 文章，例如: Content 与一些基本的 Jquery 结合使用，例如: $(".some_
我正在构建一个灯箱相册。当第一个图像加载时，CSS 转换起作用。当加载后的每个图像都没有。任何想法为什么？加载第一张之后的照片，但没有过渡。 Image.prototype.load = functi
这个问题在这里已经有了答案: Disable recent tasks button on Android 5.0 (2 个答案) 关闭 2 年前。 我知道这个问题之前在这里被问过 Android
我是 Objective-C 的新手，我只是想弄清楚我是否可以使用 block 或选择器作为 UIAlertView 的 UIAlertViewDelegate 参数 - 哪个更合适？ 我已经尝试了以
我是 Linux (UNIX) 套接字下套接字编程的新手。我在 Internet 上找到了以下代码，用于为每个连接生成一个线程的 tcp 服务器。但是它不起作用。accept() 函数立即返回，不等待
recv()库函数手册页提到: It returns the number of bytes received. It normally returns any data available, up
我有一个用于其他项目的共享 ts 库。在这个库中有被同一个库的其他资源使用的资源。该库的结构分为 components/*、interfaces/*、services/* 等目录。在每个目录的根目录中
我想在同一行中一个接一个地显示我的 ListView ，但 ListView 显示每个新行中的每个项目。我怎样才能防止换行显示。以便它显示为段落 ListView.builder( shr
我有一个包含数千行的表格。 import React from "react" import { useSelector } from "react-redux"; import { useEffec
假设我通常希望收到关于代码中不完整模式的警告，但有时我知道某个函数的模式不完整，我知道这很好。 是still true GHC 的警告粒度是每个模块的，并且没有办法更改有关特定功能或定义的警告？ 最佳
我的网络应用程序发送浏览器通知，我知道如何检查通知的浏览器权限，以及如果未授予权限，如何请求权限。 但是，即使用户授予我的站点发送通知的权限，她可能仍然无法收到通知，因为它们 might be dis
我有 Xcode 3.2.1，并且喜欢使用它，但是当我编辑文本中带有超链接的文件时(例如，带有引用的注释:# see http://example.com)Xcode 将文本变成可点击的超链接。尝试编
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许在 Stack Overflow 上提出有关通用计算硬件和软件的问题。您可以编辑问题，使其成为
我有一个在 MY_Controller 中运行的 acl。如果权限被拒绝，那么此刻，我只是执行 redirect('denied') - 这是一个非常基本的 Controller ，它加载一个非常基本
我一直很好奇尝试从 Chrome 切换到 Firefox Quantum，但是对于 Web 开发遇到了一个我无法轻松解决的主要障碍——它正在缓存我的本地主机文件，因此当我尝试在本地主机加载各种 emb
这真的让我很兴奋!在任何时候，我都会参与多个项目。当我退出Xcode时，下次打开Xcode时，我前一天的所有项目都会自动一一打开。 经常我最终编辑错误的文件，AHHHHHHHHHHH!我可以阻止这种行
我的Wiki上有500个左右的Spambot和大约5个实际注册用户。我已经使用nuke删除了他们的页面，但是他们一直在重新发布。我已经使用reCaptcha控制了spambot的注册。现在，我只需要一
我是一名优秀的程序员,十分优秀！