问题：自从将“汉堡包”菜单添加到登录页面以来，我的背景图像已被向下和向右推，在屏幕的顶部和右侧（移动设备和台式机）都留下了黑色边框。我曾尝试调整Z-index，但仍然没有运气。下面的HTML和样式表
* {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
html, body {
font-size: 14px;
height: 100%;
-webkit-font-smoothing: antialiased;
}
body {
background-color: rgb(34, 37, 43);
color: rgb(55, 61, 71);
font-family: museo-sans, "Lucida Grande", Helvetica, Arial, sans-serif;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
width: 100%;
}
/* START OF NAVIGATION*/
#menuToggle
{
display: block;
position: relative;
top: 50px;
left: 50px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle a
{
text-decoration: none;
color: #232323;
transition: color 0.3s ease;
}
#menuToggle a:hover
{
color: tomato;
}
#menuToggle input
{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0; /* hide this */
z-index: 2; /* and place it over the hamburger */
-webkit-touch-callout: none;
}
/*Create 3 Lines for Hamburger*/
#menuToggle span
{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#menuToggle span:first-child
{
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2)
{
transform-origin: 0% 100%;
}
/*Transforms lines of hamburger into a crossmark.*/
/*Transforms first line.*/
#menuToggle input:checked ~ span
{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
/* Hides the middle line.*/
#menuToggle input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
/*Transforms first line opposige direction.*/
#menuToggle input:checked ~ span:nth-last-child(2)
{
transform: rotate(-45deg) translate(0, -1px);
}
/*Make this absolute positioned at the top left of the screen */
#menu
{
position: absolute;
width: 300px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
padding-bottom: 600px;
background: #ededed;
opacity: .79;
list-style-type: none;
-webkit-font-smoothing: antialiased;
/* Patches flickering of text in Safari */
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li
{
padding: 10px 0;
font-size: 22px;
}
/*Have Menu slide in from the left*/
#menuToggle input:checked ~ ul
{
transform: none;
}
/* END OF NAVIGATION*/
.wrapper {
margin-top: 0px;
margin-right: auto;
/* margin-bottom: -60px; */
margin-left: auto;
min-height: 100%;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
height: auto;
}
.bg {
background-size: cover;
background-position-x: center;
background-position-y: center;
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
bottom: 60px;
filter: blur(5px);
opacity: 0.3;
position: absolute;
top: 101px;
/* transform: scale(1.1); */
width: 100%;
z-index: -5000;
background-image: url("SiteAssets/Love_Some_Album_Cover.jpg");
}
#main {
text-align: center;
padding-top: 40px;
padding-right: 0px;
padding-bottom: 60px;
padding-left: 0px;
}
#content {
width: 700px;
text-align: left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.title-container {
color: rgb(255, 255, 255);
font-size: 26px;
font-weight: 500;
padding-bottom: 25px;
margin-bottom: 45px;
position: relative;
text-align: center;
}
/* Comment out below dash between Zuay and song: when not a specific song being promoted */
#title1.hasBothTitles::after {
content: " - ";
}
.title-underline {
background-color: white;
bottom: 0px;
content: "";
display: block;
height: 4px;
left: calc(50% - 37px);
position: absolute;
width: 74px;
}
.youtube-container {
border-top-width: 8px;
border-right-width: 8px;
border-bottom-width: 8px;
border-left-width: 8px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: rgb(240, 240, 240);
border-right-color: rgb(240, 240, 240);
border-bottom-color: rgb(240, 240, 240);
border-left-color: rgb(240, 240, 240);
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
display: inline-block;
}
.youtube-container iframe {
display: block;
}
.youtube-player__divider {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgba(243, 244, 247, 0.5);
display: block;
margin-top: 30px;
margin-right: 0px;
margin-bottom: 30px;
margin-left: 0px;
}
.Album-metadata {
float: left;
margin-right: 30px;
text-align: center;
width: 350px;
margin-bottom: 15px;
}
.Album-metadata--mobile {
display: none;
}
.Album-metadata img {
box-sizing: border-box;
display: block;
width: 320px;
height: auto;
border-top-width: 15px;
border-right-width: 15px;
border-bottom-width: 15px;
border-left-width: 15px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: rgb(240, 240, 240);
border-right-color: rgb(240, 240, 240);
border-bottom-color: rgb(240, 240, 240);
border-left-color: rgb(240, 240, 240);
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
}
.metadata {
float: left;
margin-right: 30px;
text-align: center;
width: 350px;
}
.metadata--mobile {
display: none;
}
.metadata img {
box-sizing: border-box;
display: block;
width: 320px;
height: auto;
border-top-width: 15px;
border-right-width: 15px;
border-bottom-width: 15px;
border-left-width: 15px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: rgb(240, 240, 240);
border-right-color: rgb(240, 240, 240);
border-bottom-color: rgb(240, 240, 240);
border-left-color: rgb(240, 240, 240);
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
}
.content-wrap {
display: flex;
flex-wrap: wrap;
}
#provider-container {
float: left;
width: 320px;
}
#provider-list {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#provider-list li {
display: block;
height: 83px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 2px;
margin-left: 0px;
position: relative;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#provider-list a {
display: block;
width: 100%;
height: 100%;
text-decoration-line: none;
text-decoration-style: initial;
text-decoration-color: initial;
color: rgb(58, 62, 71);
}
#provider-list a:hover {
text-decoration-line: none;
text-decoration-style: initial;
text-decoration-color: initial;
color: rgb(255, 109, 0);
}
.retailer-logo {
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
background-repeat: no-repeat;
background-attachment: no-repeat;
background-position-x: 50%;
background-position-y: 50%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: 83px;
width: 190px;
float: left;
}
#provider-list a:hover .retailer-logo, #provider-list a:hover .retailer-verb {
background-color: rgb(243, 244, 248);
}
.retailer-logo, .retailer-verb {
background-color: rgb(243, 244, 248);
}
.retailer-verb {
float: right;
height: 100%;
position: relative;
width: 128px;
}
.retailer-verb__text {
left: 50%;
font-size: 14px;
font-weight: 700;
line-height: 20px;
position: absolute;
text-align: center;
top: 50%;
transform: translate(-50%, -50%);
width: 90%;
}
.retailer_Spotify.retailer-logo {
background-image: url("SiteAssets/Spotify.png");
background-size: 124px 57.17px;
}
.retailer_Soundcloud.retailer-logo {
background-image: url("SiteAssets/SoundCloud.png");
background-size: 150px 69.1666667px;
}
.retailer_Tidal.retailer-logo {
background-image: url("SiteAssets/Tidal.png");
background-size: 135px 62.25px;
}
.retailer_AppleMusic.retailer-logo {
background-image: url("SiteAssets/AppleMusic.png");
background-size: 150px 69.1666667px;
}
#pref-choice-container {
color: rgb(255, 255, 255);
font-size: 14px;
font-weight: 500;
padding-top: 15px;
}
input[type="checkbox"] {
display: none;
}
label {
cursor: pointer;
}
#pref-choice-container label span {
margin-right: 8px;
}
input[type="checkbox"] + label span {
display: inline-block;
width: 14px;
height: 14px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
background-color: rgb(255, 255, 255);
margin-right: 5px;
margin-top: 1px;
text-align: center;
vertical-align: text-top;
}
input[type="checkbox"]:checked + label .check-icon, input[type="checkbox"]:checked + label span svg.check-icon {
display: inline;
fill: rgb(255, 108, 0);
height: 8px;
position: relative;
top: -2px;
width: 8px;
}
input[type="checkbox"] + label span svg.check-icon {
margin-top: 2px;
}
.check-icon, label span svg.check-icon {
display: none;
}
#offer {
margin-top: 35px;
width: 100%;
}
.offer__wrap {
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
width: 100%;
}
.offer__title {
color: rgb(255, 255, 255);
font-size: 0.563rem;
font-style: italic;
margin-bottom: 2px;
text-align: right;
}
.offer__button {
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: rgb(51, 146, 250);
background-image: linear-gradient(to right, rgb(170, 170, 170), rgb(142, 142, 142));
color: rgb(255, 255, 255);
cursor: pointer;
display: flex;
-webkit-box-align: center;
align-items: center;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
font-size: 0.875rem;
font-weight: 700;
height: 40px;
letter-spacing: 0.02em;
margin-left: auto;
padding-top: 9px;
padding-right: 15px;
padding-bottom: 9px;
padding-left: 15px;
text-align: center;
text-decoration-line: none;
text-decoration-style: initial;
text-decoration-color: initial;
width: 290px;
}
.offer__icon {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
display: inline-block;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 0px;
width: 30px;
}
.icon {
display: inline-block;
fill: currentcolor;
height: 1em;
vertical-align: middle;
width: 1em;
}
.footer, .push {
box-sizing: border-box;
min-height: 60px;
padding-top: 14px;
padding-right: 0px;
padding-bottom: 14px;
padding-left: 0px;
}
.push {
position: relative;
z-index: -1;
}
.footer {
background-color: transparent;
color: #ff6f61;
font-size: 10px;
font-weight: 500;
line-height: 32px;
position: relative;
text-align: center;
text-transform: uppercase;
width: 100%;
z-index: 5;
}
.footer a {
color: inherit;
}
#logo {
display: block;
float: left;
margin-left: 10px;
}
.overlay {
background-image: initial;
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: rgba(0, 0, 0, 0.9);
bottom: 0px;
min-height: 100%;
overflow-x: hidden;
position: fixed;
right: 100%;
top: 0px;
transition-duration: 400ms;
transition-timing-function: ease-in-out;
transition-delay: 0s;
transition-property: right;
width: 100%;
z-index: 15000;
}
.overlay__close {
color: rgb(100, 110, 128);
cursor: pointer;
font-size: 32px;
line-height: 1em;
position: absolute;
right: 18px;
top: 15px;
z-index: 1000;
}
.overlay__close:hover {
color: rgb(255, 108, 0);
}
.overlay__close .icon {
vertical-align: top;
}
.overlay__content {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
max-width: 320px;
opacity: 1;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
position: relative;
z-index: 100;
}
/* Video Thumbnail Page */
/* Duplicated content-wrap to video-wrap */
/* Duplicated metadata to leftthumbnail & rightthumbnail
/* Thumbnail--mobile and thumbnail img */
/* Added .thumbnail-group for majoirty of thumbnails */
/* Added videocontent for custom wider width on Video Display page(Account for 50px spacing between vids) */
#videocontent {
width: 950px;
text-align: left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#video-wrap {
display: flex;
flex-wrap: wrap;
}
#video-group-wrap {
display: flex;
flex-wrap: wrap;
}
#leftthumbnail {
float: left;
margin-right: 30px;
text-align: center;
width: 450px;
padding-bottom: 15px;
}
#rightthumbnail {
float: left;
width: 450px;
padding-bottom: 15px;
}
#groupthumbnail {
float: left;
margin-right: 30px;
text-align: center;
width: 210px;
padding-bottom: 10px;
}
#groupthumbnail4th {
float: left;
text-align: center;
width: 210px;
padding-bottom: 10px;
}
#leftthumbnail img {
box-sizing: border-box;
display: block;
width: 100%;
height: auto;
border-top-width: 15px;
border-right-width: 15px;
border-bottom-width: 15px;
border-left-width: 15px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: rgb(240, 240, 240);
border-right-color: rgb(240, 240, 240);
border-bottom-color: rgb(240, 240, 240);
border-left-color: rgb(240, 240, 240);
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
}
#rightthumbnail img {
box-sizing: border-box;
display: block;
width: 100%;
height: auto;
border-top-width: 15px;
border-right-width: 15px;
border-bottom-width: 15px;
border-left-width: 15px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: rgb(240, 240, 240);
border-right-color: rgb(240, 240, 240);
border-bottom-color: rgb(240, 240, 240);
border-left-color: rgb(240, 240, 240);
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
}
#groupthumbnail img {
box-sizing: border-box;
display: block;
width: 100%;
height: auto;
border-top-width: 7.5px;
border-right-width: 7.5px;
border-bottom-width: 7.5px;
border-left-width: 7.5px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: rgb(240, 240, 240);
border-right-color: rgb(240, 240, 240);
border-bottom-color: rgb(240, 240, 240);
border-left-color: rgb(240, 240, 240);
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
}
#groupthumbnail4th img {
box-sizing: border-box;
display: block;
width: 100%;
height: auto;
border-top-width: 7.5px;
border-right-width: 7.5px;
border-bottom-width: 7.5px;
border-left-width: 7.5px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: rgb(240, 240, 240);
border-right-color: rgb(240, 240, 240);
border-bottom-color: rgb(240, 240, 240);
border-left-color: rgb(240, 240, 240);
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
}<body>
<header>
<nav role="navigation">
<div id="menuToggle">
<!--Hidden checkbox is used as click reciever to use checked selector on it.-->
<input type="checkbox" />
<!--Spans to serve as a hamburger lines.-->
<span></span>
<span></span>
<span></span>
<!--
Only CSS limitastin: menu has to be inside of the button-->
<ul id="menu">
<a href="index.html"><li>Home</li></a>
<a href="/Music.html"><li>Music</li></a>
<a href="/Videos.html"><li>Videos</li></a>
<a href="https://www.byocompound.com"><li>Shop</li></a>
<a href="mailto:[email protected]?subject=Zuay Thompson Website" target="Email Contact Nav"><li>Contact</li></a>
</ul>
</div>
</nav>
</header>
<center class="wrapper">
<div class="bg"></div>
<div id="main">
<div id="content">
<div class="title-container">
<!-- Uncomment out line before and dash in Style sheet to remove song beofre Zuay's name-->
<span id="title1" class="hasBothTitles">Espionage</span>
<span id="title2">Zuay Thompson</span>
<span class="title-underline"></span>
</div>
<!--Commented out " #title1.hasBothTitles::after" from style sheet for when not a specific song being promoted -->
<div class="metadata metadata--mobile">
<img src="/SiteAssets/Espionage_Album_Cover.jpg">
</div>
<center class="content-wrap" style="display: block;">
<center style="display: inline-block;">
<!-- Change Album Cover Here -->
<!-- Resize ".metadata img" to 320px to be inline -->
<div class="metadata">
<img class="metadata-img--apple-music" src="/SiteAssets/Espionage_Album_Cover.jpg">
</div>
<div id="provider-container">
<ul id="provider-list">
<!-- Soundcloud Section -->
<li>
<a class="retailer-link" href="https://soundcloud.com/zuaythompson/no-shame-zuay-thompson-prod-a-lau" title="Soundcloud - United States" target="Soundcloud Stream">
<div class="retailer-logo retailer_Soundcloud"></div>
<div class="retailer-verb">
<span class="retailer-verb__text">Listen</span>
</div>
</a>
</li>
<!-- Spotify Section -->
<li>
<a class="retailer-link" href="https://open.spotify.com/track/4zCHNxlbyQtZ7DeBoAtKl8" title="Spotify - United States" target="Spotify Stream">
<div class="retailer-logo retailer_Spotify"></div>
<div class="retailer-verb">
<span class="retailer-verb__text">Listen</span>
</div>
</a>
</li>
<!-- Apple Music Section -->
<li>
<a class="retailer-link" href="https://music.apple.com/us/album/espionage-single/1485921338" title="Apple Music" target="Apple Music Stream">
<div class="retailer-logo retailer_AppleMusic"></div>
<div class="retailer-verb">
<span class="retailer-verb__text">Listen</span>
</div>
</a>
</li>
<!-- Tidal Section -->
<li>
<a class="retailer-link" href="https://tidal.com/browse/track/121566818" title="Tidal" target="Tidal Stream">
<div class="retailer-logo retailer_Tidal"></div>
<div class="retailer-verb">
<span class="retailer-verb__text">Listen</span>
</div>
</a>
</li>
</ul>
<!--3 div's and SVG's control space between footer logo and Streaming list-->
</div>
</center>
</center>
<div style="clear:both"></div>
</div>
</div>
<!-- <div class="push"></div> -->
</dciv>
<!-- Change Footer Logo and Link-->
<center class="footer">
<p style="display: inline-block; line-height: 30px;">
<span title="D Wynn P" style="float: left; display: block; ">Curated by </span>
<a href="http://www.DylanPhilbrick.com" id="logo" target="_blank">
<img style="height: 30px;" title="D Wynn P" src="/SiteAssets/www.DylanPhilbrick.com.png"/>
</a>
</p>
</center>
</body>position: absolute，并且汉堡菜单的z索引会更高。