在html和css中向下滚动时，如何使图像位于菜单栏后面？
[英]How do I make the image go behind the menu bar when I scroll down in html & css?
问题描述
在html和css中向下滚动时，如何使图像位于菜单栏后面？ 我已经尝试了一些方法，但是对我没有帮助，请尽可能帮助我，因为这对我来说非常重要，请在此处输入图片描述
* { margin: 0; padding: 0; } body { width: 100%; height: 100%; background-color: #fff3cc; } .menu { background-color: rgba(0, 0, 0, 0.5); width: 100%; top: 0; position: fixed; } .menu ul { display: inline-flex; float: right; margin: 30px; font-family: "FuturaMedium", Futura, "Century Gothic", sans-serif; } .menu ul li { list-style: none; margin: 0 20px; color: #fff; cursor: pointer; } h3 { float: left; margin-top: 30px; margin-left: 30px; font-family: "FuturaMedium", Futura, "Century Gothic", sans-serif; color: #ff8c8c; } .active { color: #a5e5ff !important; } .slidershow { width: 500px; height: 500px; overflow: hidden; } .middle { position: absolute; top: 50%; left: 25%; transform: translate(-50%, -50%); } .navigation { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; } .bar { width: 50px; height: 10px; border: 2px solid #fff; margin: 6px; cursor: pointer; } .bar:hover { background: #fff; } input[name="r"] { position: absolute; visibility: hidden; } .slides { width: 500%; height: 100%; display: flex; } .slide { width: 20%; transition: 0.6s; } .slide img { width: 100%; height: 100%; } #r1:checked~.s1 { margin-left: 0; } #r2:checked~.s1 { margin-left: -20%; } #r3:checked~.s1 { margin-left: -40%; } .about { margin-top: 100px; float: right; width: 50%; padding-left: 150px; margin-right: 40px; } h1 { font-family: "Lucida Grande", sans-serif; font-size: 30pt; line-height: 60px; } h2 { font-family: "Lucida Grande", sans-serif; line-height: 50px; } p { font-family: Optima, sans-serif; font-size: 13pt; line-height: 30px; } .shop-btn { margin-left: 250px; margin-top: 680px; display: inline-flex; } .shop-btn-inner { height: 50px; width: 50px; border: 2px solid transparent; border-radius: 50px; background-image: linear-gradient(#42455a, #42455a), radial-gradient(circle at top left, #fd00da, #19d7f8); background-origin: border-box; background-clip: content-box, border-box; text-align: center; } .shop-btn-inner .fa { padding: 18px 0; font-size: 13px; cursor: pointer; } .small { margin: auto 20px; cursor: pointer; font-size: 12px; color: #96ff8c; letter-spacing: 3px; }
<html> <head> <title>Vista Digital Cameras</title> <link rel="stylesheet" href="home.css" type="text/css"> </head> <body> <div class="container"> <div class="menu"> <h3>VISTA DIGITAL</h3> <ul> <li class="active">HOME</li> <li>CAMERAS</li> <li>SERVICES</li> <li>NEWS</li> <li>CONTACT</li> </ul> </div> <div class="slidershow middle"> <div class="slides"> <input type="radio" name="r" id="r1" checked> <input type="radio" name="r" id="r2"> <input type="radio" name="r" id="r3"> <div class="slide s1"> <img src="images/x-a5%20brown.jpg" alt=""> </div> <div class="slide"> <img src="images/x-a5%20black.jpg" alt=""> </div> <div class="slide"> <img src="images/x-a5%20turquoise.jpg" alt=""> </div> </div> <div class="navigation"> <label for="r1" class="bar"></label> <label for="r2" class="bar"></label> <label for="r3" class="bar"></label> </div> </div> <div class="about"> <h1>About Us</h1> <p>Vista Digital is a company engaged in the field of photography founded in 2000. In accordance with our vision and mission, we are committed to help develop the world of photography in Indonesia with our concept, the 3S, namely: Sales, Services, and School.</p> <h2>Sales</h2> <p>We make every effort to meet the needs of photographers by providing all photographic equipments, ranging from core equipments to supporting accessories for your photography needs, from all brands both original and third-party. Our knowledgeable staff will help you with product knowledge and technical and maintenance matters in the use of your photographic equipments.</p> <h2>Services</h2> <p>We also provide repairment/maintenance services for your photography products for all brands, supported by highly experienced equipments and technical personnel. </p> <h2>School</h2> <p>Not only do we focus on Sales and Services, we also provide solutions for those of you who want to explore the field of photograph quickly and effectively. We provide adequate facilities, namely comfortable classrooms, studios, materials, and models, as well as tutors who are certainly very competent in the field of photography.</p> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> </div> <div class="shop-btn"> <div class="shop-btn-inner"><i class="fa fa-play"></i> </div> <small style="margin-top: 20px; margin-left: 10px; color: #96ff8c" ;><b>SHOP NOW</b></small> </div> </div> </body> </html>
我尝试了一切
在html和css中向下滚动时，如何使图像位于菜单栏后面？
6 个解决方案
解决方案1
2 2019-08-19 09:27:37
解决方案2
2 2019-08-19 09:34:03
您将需要了解有关z-index的更多信息。
Freecodecamp对z-index提供了很好的解释： https ://www.freecodecamp.org/news/z-index-explained-how-to-stack-elements-using-css-7c5aa0f179b3/
但是为了快速解决您的问题，您可以在.menu添加一个z-index。
.menu{
background-color: rgba(0,0,0,0.5);
width: 100%;
top: 0;
position: fixed;
z-index: 1;
}
解决方案3
2 2019-08-19 09:37:31
添加.slidershow { z-index: -999;}
*{ margin: 0; padding: 0; } body{ width: 100%; height: 100%; background-color: #fff3cc; } .menu{ background-color: rgba(0,0,0,0.5); width: 100%; top: 0; position: fixed; } .menu ul{ display: inline-flex; float: right; margin: 30px; font-family: "FuturaMedium",Futura,"Century Gothic",sans-serif; } .menu ul li{ list-style: none; margin: 0 20px; color: #fff; cursor: pointer; } h3{ float: left; margin-top: 30px; margin-left: 30px; font-family: "FuturaMedium",Futura,"Century Gothic",sans-serif; color: #ff8c8c; } .active{ color: #a5e5ff !important; } .slidershow{ width: 500px; height: 500px; overflow: hidden; } .middle{ position: absolute; top: 50%; left: 25%; transform: translate(-50%,-50%); } .navigation{ position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; } .bar{ width: 50px; height: 10px; border: 2px solid #fff; margin: 6px; cursor: pointer; } .bar:hover{ background: #fff; } input[name="r"]{ position: absolute; visibility: hidden; } .slides{ width: 500%; height: 100%; display: flex; } .slide{ width: 20%; transition: 0.6s; } .slide img{ width: 100%; height: 100%; } #r1:checked ~ .s1{ margin-left: 0; } #r2:checked ~ .s1{ margin-left: -20%; } #r3:checked ~ .s1{ margin-left: -40%; } .about{ margin-top: 100px; float: right; width: 50%; padding-left: 150px; margin-right: 40px; } h1{ font-family: "Lucida Grande", sans-serif; font-size: 30pt; line-height: 60px; } h2{ font-family: "Lucida Grande", sans-serif; line-height: 50px; } p{ font-family: Optima, sans-serif; font-size: 13pt; line-height: 30px; } .shop-btn{ margin-left: 250px; margin-top: 680px; display: inline-flex; } .shop-btn-inner{ height: 50px; width: 50px; border: 2px solid transparent; border-radius: 50px; background-image: linear-gradient(#42455a,#42455a),radial-gradient(circle at top left,#fd00da,#19d7f8); background-origin: border-box; background-clip: content-box, border-box; text-align: center; } .shop-btn-inner .fa{ padding: 18px 0; font-size: 13px; cursor: pointer; } .small{ margin: auto 20px; cursor: pointer; font-size: 12px; color: #96ff8c; letter-spacing: 3px; } .slidershow{ z-index: -999; }
<div class="container"> <div class="menu"> <h3>VISTA DIGITAL</h3> <ul> <li class="active">HOME</li> <li>CAMERAS</li> <li>SERVICES</li> <li>NEWS</li> <li>CONTACT</li> </ul> </div> <div class="slidershow middle"> <div class="slides"> <input type="radio" name="r" id="r1" checked> <input type="radio" name="r" id="r2"> <input type="radio" name="r" id="r3"> <div class="slide s1"> <img src="images/x-a5%20brown.jpg" alt=""> </div> <div class="slide"> <img src="images/x-a5%20black.jpg" alt=""> </div> <div class="slide"> <img src="images/x-a5%20turquoise.jpg" alt=""> </div> </div> <div class="navigation"> <label for="r1" class="bar"></label> <label for="r2" class="bar"></label> <label for="r3" class="bar"></label> </div> </div> <div class="about"> <h1>About Us</h1> <p>Vista Digital is a company engaged in the field of photography founded in 2000. In accordance with our vision and mission, we are committed to help develop the world of photography in Indonesia with our concept, the 3S, namely: Sales, Services, and School.</p> <h2>Sales</h2> <p>We make every effort to meet the needs of photographers by providing all photographic equipments, ranging from core equipments to supporting accessories for your photography needs, from all brands both original and third-party. Our knowledgeable staff will help you with product knowledge and technical and maintenance matters in the use of your photographic equipments.</p> <h2>Services</h2> <p>We also provide repairment/maintenance services for your photography products for all brands, supported by highly experienced equipments and technical personnel. </p> <h2>School</h2> <p>Not only do we focus on Sales and Services, we also provide solutions for those of you who want to explore the field of photograph quickly and effectively. We provide adequate facilities, namely comfortable classrooms, studios, materials, and models, as well as tutors who are certainly very competent in the field of photography.</p> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> </div> <div class="shop-btn"> <div class="shop-btn-inner"><i class="fa fa-play"></i> </div> <small style="margin-top: 20px; margin-left: 10px; color: #96ff8c";><b>SHOP NOW</b></small> </div> </div>
解决方案4
1 2019-08-19 09:32:01
在菜单元素上使用z-index
.menu{
background-color: rgba(0,0,0,0.5);
width: 100%;
top: 0;
position: fixed;
z-index: 999;
}
解决方案5
0 2019-08-19 09:48:05
.menu {
background-color: rgba(0,0,0,0.5);
width: 100%;
top: 0;
position: fixed;
z-index: 10000; // any number higher than one
}
注意：由于菜单背景颜色不透明，您看不到任何更改
解决方案6
0 2019-08-19 09:50:41
只需添加z-index:1; 到.menu类。
.menu{
background-color: rgba(0,0,0,0.5);
width: 100%;
top: 0;
position: fixed;
z-index:1; /* Add this */
}
z-index ： z-index属性指定元素的堆叠顺序。 具有较高堆叠顺序的元素将始终出现在具有较低堆叠顺序的元素之前。
*{ margin: 0; padding: 0; } body{ width: 100%; height: 100%; background-color: #fff3cc; } .menu{ background-color: rgba(0,0,0,0.5); width: 100%; top: 0; position: fixed; z-index:1; } .menu ul{ display: inline-flex; float: right; margin: 30px; font-family: "FuturaMedium",Futura,"Century Gothic",sans-serif; } .menu ul li{ list-style: none; margin: 0 20px; color: #fff; cursor: pointer; } h3{ float: left; margin-top: 30px; margin-left: 30px; font-family: "FuturaMedium",Futura,"Century Gothic",sans-serif; color: #ff8c8c; } .active{ color: #a5e5ff !important; } .slidershow{ width: 500px; height: 500px; overflow: hidden; } .middle{ position: absolute; top: 50%; left: 25%; transform: translate(-50%,-50%); } .navigation{ position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; } .bar{ width: 50px; height: 10px; border: 2px solid #fff; margin: 6px; cursor: pointer; } .bar:hover{ background: #fff; } input[name="r"]{ position: absolute; visibility: hidden; } .slides{ width: 500%; height: 100%; display: flex; } .slide{ width: 20%; transition: 0.6s; } .slide img{ width: 100%; height: 100%; } #r1:checked ~ .s1{ margin-left: 0; } #r2:checked ~ .s1{ margin-left: -20%; } #r3:checked ~ .s1{ margin-left: -40%; } .about{ margin-top: 100px; float: right; width: 50%; padding-left: 150px; margin-right: 40px; } h1{ font-family: "Lucida Grande", sans-serif; font-size: 30pt; line-height: 60px; } h2{ font-family: "Lucida Grande", sans-serif; line-height: 50px; } p{ font-family: Optima, sans-serif; font-size: 13pt; line-height: 30px; } .shop-btn{ margin-left: 250px; margin-top: 680px; display: inline-flex; } .shop-btn-inner{ height: 50px; width: 50px; border: 2px solid transparent; border-radius: 50px; background-image: linear-gradient(#42455a,#42455a),radial-gradient(circle at top left,#fd00da,#19d7f8); background-origin: border-box; background-clip: content-box, border-box; text-align: center; } .shop-btn-inner .fa{ padding: 18px 0; font-size: 13px; cursor: pointer; } .small{ margin: auto 20px; cursor: pointer; font-size: 12px; color: #96ff8c; letter-spacing: 3px; }
<div class="container"> <div class="menu"> <h3>VISTA DIGITAL</h3> <ul> <li class="active">HOME</li> <li>CAMERAS</li> <li>SERVICES</li> <li>NEWS</li> <li>CONTACT</li> </ul> </div> <div class="slidershow middle"> <div class="slides"> <input type="radio" name="r" id="r1" checked> <input type="radio" name="r" id="r2"> <input type="radio" name="r" id="r3"> <div class="slide s1"> <img src="images/x-a5%20brown.jpg" alt=""> </div> <div class="slide"> <img src="images/x-a5%20black.jpg" alt=""> </div> <div class="slide"> <img src="images/x-a5%20turquoise.jpg" alt=""> </div> </div> <div class="navigation"> <label for="r1" class="bar"></label> <label for="r2" class="bar"></label> <label for="r3" class="bar"></label> </div> </div> <div class="about"> <h1>About Us</h1> <p>Vista Digital is a company engaged in the field of photography founded in 2000. In accordance with our vision and mission, we are committed to help develop the world of photography in Indonesia with our concept, the 3S, namely: Sales, Services, and School.</p> <h2>Sales</h2> <p>We make every effort to meet the needs of photographers by providing all photographic equipments, ranging from core equipments to supporting accessories for your photography needs, from all brands both original and third-party. Our knowledgeable staff will help you with product knowledge and technical and maintenance matters in the use of your photographic equipments.</p> <h2>Services</h2> <p>We also provide repairment/maintenance services for your photography products for all brands, supported by highly experienced equipments and technical personnel. </p> <h2>School</h2> <p>Not only do we focus on Sales and Services, we also provide solutions for those of you who want to explore the field of photograph quickly and effectively. We provide adequate facilities, namely comfortable classrooms, studios, materials, and models, as well as tutors who are certainly very competent in the field of photography.</p> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> </div> <div class="shop-btn"> <div class="shop-btn-inner"><i class="fa fa-play"></i> </div> <small style="margin-top: 20px; margin-left: 10px; color: #96ff8c";><b>SHOP NOW</b></small> </div> </div>
向下滚动页面时，如何使导航栏下方出现阴影？
[英]How do I make a shadow appear under the navigation bar when I scroll down the page?
当我向上滚动并在向上滚动或当我将鼠标悬停在上面时，如何使导航条变得透明？
[英]How do i make my nav bar transparent when I scroll down and come back when I scroll up or when I hover my mouse over is?
如何使我的图像 go 从旋转到直线（HTML，CSS，JS，）
[英]How do I make my image go FROM rotated to straight (HTML, CSS, JS,)
当我向上滚动时，如何使“粘滞菜单”回到其原始类别？
[英]How do I make a “sticky menu” go back to it original class as I scroll back up?
如何修复导航栏，以便在该人未查看导航栏时删除菜单？ | CSS / Javascript
[英]How Do I Fix the Nav Bar So That the Menu is Removed when the person is not viewing the nav bar? | CSS / Javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.