我目前正在用 Html 制作我的第一个网站,javascript 作为前端将首先出现。
我正在尝试创建一个折叠侧边栏,当我单击顶部导航右侧的按钮时会出现该侧边栏,但我对过渡效果有疑问,因为它会将所有内容推到右侧但在这样做图像不显示,顶部导航不覆盖顶部而是在页面顶部下方一点如何解决这个问题?
我拿走了<div id="main">
在这样做的过程中,背景图像重新出现,顶部导航覆盖了页面顶部,而顶部导航应该位于页面顶部,但是侧边栏现在覆盖了页面的一部分,而不是将其移动到右侧。
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
document.body.style.backgroundColor = "white";
}
#main {
transition: margin-left .5s;
padding: 20px;
}
.bgimg_1 {
position: relative;
opacity: 1.0;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.sidebar{
backfround-color: red;
}
.bgimg_1{
background-image:
href("https://cdn.athemes.com/wp-content/uploads/Original-JPG-Image.jpg");
min-height: 100%;
}
<div id="main">
<div class="topnav">
<a href="Reids Hub">Reids Hub</a>
<button class="openbtn" class="tips" onclick="openNav()">☰</button>
</div>
<div id="mySidebar" class="sidebar">
<a href="JavaScript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">What started all of this.</a>
<a href="#">About me.</a>
<a href="#">Projects.</a>
<a href="#">Contacts.</a>
</div>
<div class="bgimg_1">
<div class="caption">
<span class="border">SCROLL DOWN</span>
</div>
</div>
</div>
我希望一切顺利,但确实如此,但我也希望图像能够过渡到页面的其余部分,实际上图像会消失。
最佳答案
语法无效
background-image
正确的语法是:
background-image:
url(http://host.top/path/to/img.jpg);
布局
另外,如果你想要一个覆盖整个视口(viewport)的背景(屏幕的花哨词),将它放在一个父元素中,通常是 body
,如果那是你的意图,那么删除 。 Bg_img1
。整个东西。将以下样式添加到 body
(参见 Demo 1):
body { font-family: "Lato", sans-serif; background-image: url(https://3jbq2ynuxa-flywheel.netdna-ssl.com/wp-content/uploads/2018/07/pasted-image-0-19.png); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }
如果您希望将 background-image
保留在右侧,则将其添加到 #main
而不是 body
(请参阅演示 2):
#main { background-image: url(https://3jbq2ynuxa-flywheel.netdna-ssl.com/wp-content/uploads/2018/07/pasted-image-0-19.png); background-position: center; background-repeat: no-repeat; background-size: cover; transition: margin-left .5s; padding: 16px; color: #fff; min-height: 100vh; }
演示1
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
body {
font-family: "Lato", sans-serif;
background-image: url(https://3jbq2ynuxa-flywheel.netdna-ssl.com/wp-content/uploads/2018/07/pasted-image-0-19.png);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
color: #fff;
}
@media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<div id="main">
<h2>Sidenav Push Example</h2>
<p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>
演示2
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
background-image: url(https://3jbq2ynuxa-flywheel.netdna-ssl.com/wp-content/uploads/2018/07/pasted-image-0-19.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
transition: margin-left .5s;
padding: 16px;
color: #fff;
min-height: 100vh;
}
@media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<div id="main">
<h2>Sidenav Push Example</h2>
<p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>
关于javascript - Transition effect 不把 transition image 去掉吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54162086/