侧菜单alpha不在body标签上工作

时间：2018-03-12 01:02:33

标签： javascript css3

我的网站上有一个侧面导航菜单。按下时，它会调用一个JavaScript函数来更改body标记的alpha通道。由于某种原因，只有部分屏幕的alpha通道正在改变（section，img，bootstrap容器不是）。 section标签有一个类，它给它一个背景颜色，我认为这可能是问题。这将是实现这项工作的明智方法吗？

这是我用于Alpha管理的代码：

/* Set the width of the side navigation to 250px */
function openNav() {
    document.getElementById("mySidenav").style.width = "350px";
    document.body.style.background = "rgba(0,0,0,0.4)";
}

/* Set the width of the side navigation to 0 */
function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
     document.body.style.background = "rgba(0,0,0,0)";
}

html如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cripto Frog</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css?family=Rammetto+One" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
    <script src="sidebar.js"></script>
</head>
<main>
    <header>
    <span class="menu_burger" onclick="openNav()"><i class="fas fa-align-justify"></i></i></span>
    <img src="img/frog.jpg" alt="">
    </header>

        <body>

            <!-- Side Menu -->
            <div id="mySidenav" class="sidenav">
              <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
              <a href="people.html">TOP_TEN_COINS</a>
              <a href="#">ALT_COINS</a>
              <a href="#">WHITE_PAPERS</a>
              <a href="#">YOUTUBERS</a>
              <a href="#">EXCHANGES</a>
              <a href="#">NEWS_SITES</a>
              <a href="#">CONTACTO</a>
              <section class="nav_divididor"></section>
              <section class="nav_footer">hlkjhlkjhlk</section>
            </div>




            <section class="primera_section"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam doloremque excepturi molestias aut fuga ullam aliquid minus dolores voluptatem non, beatae placeat soluta libero eos et delectus nemo minima iusto.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi error aspernatur officiis, sint fugiat unde quos labore laborum cupiditate voluptates, totam sunt ut quod praesentium omnis et consequuntur sapiente incidunt?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit iure eveniet a voluptas cumque! Eos qui, iusto neque, fugit praesentium totam soluta eius laudantium cupiditate dolorem dignissimos ut minus veritatis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla earum soluta nesciunt dicta officia reprehenderit autem, molestias explicabo et accusamus, officiis nostrum cumque perspiciatis suscipit veniam molestiae fuga tenetur modi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate itaque atque molestiae, id fugit, quidem hic rem cum praesentium dolor perspiciatis nostrum sapiente enim corrupti doloremque aliquam voluptas cumque omnis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam iusto dolor nostrum voluptate quos consectetur facere, quia, earum non, tenetur, officia laboriosam cumque suscipit itaque nobis obcaecati. Facilis veritatis, repudiandae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam doloremque excepturi molestias aut fuga ullam aliquid minus dolores voluptatem non, beatae placeat soluta libero eos et delectus nemo minima iusto.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi error aspernatur officiis, sint fugiat unde quos labore laborum cupiditate voluptates, totam sunt ut quod praesentium omnis et consequuntur sapiente incidunt?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit iure eveniet a voluptas cumque! Eos qui, iusto neque, fugit praesentium totam soluta eius laudantium cupiditate dolorem dignissimos ut minus veritatis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla earum soluta nesciunt dicta officia reprehenderit autem, molestias explicabo et accusamus, officiis nostrum cumque perspiciatis suscipit veniam molestiae fuga tenetur modi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate itaque atque molestiae, id fugit, quidem hic rem cum praesentium dolor perspiciatis nostrum sapiente enim corrupti doloremque aliquam voluptas cumque omnis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam iusto dolor nostrum voluptate quos consectetur facere, quia, earum non, tenetur, officia laboriosam cumque suscipit itaque nobis obcaecati. Facilis veritatis, repudiandae.p</p>
            </section>

<!-- Use any element to open the sidenav -->
    </body>
    <span onclick="openNav()">open</span>
</main>     

<!-- Use any element to open the sidenav -->
<span onclick="openNav()">open</span>

</html>

css文件

/* Secciones */
html{
    margin-top: 0px;
    /*overflow: hidden; */

}

body{

   /*  overflow-x: hidden;*/
}

p{
    font-family: 'Lora';
    font-style: normal;
    font-weight: 700;
}

fieldset {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 100;
}


 .nav_footer{
    height: 90%;
    background-color: black; /* Black*/
    color: white;
    display: flex;
    align-items: flex-end;
    /*overflow-x: hidden; */

}

.nav_divididor{
    width: 100%;
    background-color: #388E3C;
    height: 12px;

}


 .primera_section{
    width: 100%;
    height: 700px;
    background-color: #FFFFFF; /* Black*/
 }

 .segunda_section{
    width: 100%;
    height: 700px;
    background-color: #C8E6C9; /* Black*/
 }

 .tercera_section{
    width: 100%;
    height: 700px;
    background-color: #BDBDBD; /* Black*/
 }

 .divisoria {
    width: 100%;
    background-color: black;
    height: 2px;
 }

 .menu_burger{
    position: absolute;
    top:2;
 }





/* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: white; /* Dark Green*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.8s; /* 0.5 second transition effect to slide in the sidenav */
}

.sidenav::-webkit-scrollbar {
  display: none;
}

/* The navigation menu links */
.sidenav a {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 700;
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: black;
    display: block;
    transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
    color: grey;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}

0 个答案:

没有答案
相关问题
最新问题