过渡效果没有过渡图像，它删除了它吗？
过渡效果没有过渡图像，它删除了它吗？
提问于 2019-01-13 01:26:16
我目前正在用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>
我希望一切正常，但我也希望图像过渡到页面的其余部分，实际上图像消失了。
回答 1
Stack Overflow用户
发布于 2019-01-13 04:19:09
无效语法
background-image正确的语法是：
background-image:url(http://host.top/path/to/img.jpg);
布局
此外，如果你想要一个覆盖整个视窗的背景(屏幕的花哨字眼)，把它放在一个父元素中，通常是body，如果这是你的意图，那么删除.Bg_img1。整件事。将以下样式添加到body (请参阅演示1)：
封面正文{
-family："Lato"，sans-serif；背景图片: url(https://3jbq2ynuxa-flywheel.netdna-ssl.com/wp-content/uploads/2018/07/pasted-image-0-19.png)；背景附件:固定；背景位置:居中；背景重复:不重复；背景大小:封面；}
如果您更喜欢将background-image放在右侧，则将此代码添加到#main(请参阅演示2)，而不是body：
#main {背景图片: url(https://3jbq2ynuxa-flywheel.netdna-ssl.com/wp-content/uploads/2018/07/pasted-image-0-19.png)；背景位置:居中；背景重复:无重复；背景大小:封面；过渡:页边距-左边距；填充: 16px；.5s：#fff；最小高度: 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54162086
复制相关文章
相似问题
腾讯云开发者
