当我们放大/缩小时，如何将内容保持在 bg-image 上并保持垂直居中？
[英]How to keep content over bg-image and keeping it vertically centered when we zoom in/out?
问题描述
I am working on a project and I am facing a problem with the navigation section.
我正在做一个项目，但我在导航部分遇到了问题。 So basically I am making a navigation bar in which I need image in the background and in front I want to add div containing links & buttons on that image.所以基本上我正在制作一个导航栏，我需要在背景中使用图像，在前面我想在该图像上添加包含links和buttons的div 。 I tried finding answer but still I didn't figured it out.我试图找到答案，但我仍然没有弄清楚。 Here is the HTML & CSS -这是 HTML 和 CSS -
* { margin: 0; padding: 0; box-sizing: border-box; } html { overflow-x: hidden; font-size: 62.5%; } body { font-family: "Roboto", Courier, monospace; }.page-content { width: 120rem; margin: 0 auto; }.nav-section { position: relative; }.banner-img { width: 100%; }.nav-link-container { background-color: wheat; display: flex; justify-content: space-between; padding: 1.6rem; position: absolute; top: 76%; left: 10.9%; }.nav-link-container ul { font-size: 1.6rem; list-style: none; display: flex; gap: 4.8rem; }.nav-link-container ul a { text-decoration: none; }.nav-btn-container { display: flex; gap: 4.8rem; }.header-section { background-color: bisque; }.header-section h4 { font-size: 1.6rem; padding: 1.6rem; text-align: center; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <script defer src="script:js"></script> <title>document</title> </head> <body> <nav class="nav-section"> <img class="banner-img" src="https.//lehndorff.com/music/wp-content/uploads/2013/10/1600x230-banner.jpg" alt="" /> <div class="nav-link-container page-content"> <ul> <li><a class="nav-links" href="#">Home</a></li> <li><a class="nav-links" href="#">About us</a></li> <li><a class="nav-links" href="#">Services</a></li> <li><a class="nav-links" href="#">Servers</a></li> <li><a class="nav-links" href="#">Forum</a></li> </ul> <div class="nav-btn-container"> <button class="nav-btn">Login</button> <button class="nav-btn">Sign up</button> </div> </div> </nav> <header> <div class="header-section page-content"> <h4>Hello World!!</h4> </div> </header> </body> </html>
Now I have two questions (plz watch the code snippet in full screen) -现在我有两个问题（请全屏观看代码片段） -
- When you will zoom in/out, you will see
header-sectionstays in the middle without caring how much we zoom in/out whilenav-link-containerstays to the left side while zooming out/in.当您放大/缩小时，您会看到header-section停留在中间而不关心我们放大/缩小多少，而nav-link-container在缩小/放大时停留在左侧。 I think this is because ofposition:absolute;我认为这是因为position:absolute;.. So how do I fix it?那么我该如何解决呢？ Why is this happening?为什么会这样？ - I have set
margin:0;我设置了margin:0;&padding:0;& padding:0;in*but still if u see there is small pixel of gap betweenheader-sectionand image.在*但仍然如果您看到header-section和图像之间存在小像素间隙。 Why is it happening??为什么会这样？？
1 个解决方案
解决方案1
0 2021-12-07 12:41:23
We have come up with a solution, Hope it will work for you.我们已经提出了一个解决方案，希望它对您有用。
Please refer to this link: https://jsfiddle.net/yudizsolutions/yk8ftdgn/请参考此链接： https://jsfiddle.net/yudizsolutions/yk8ftdgn/
Here we have taken the image as a background image , instead of taking it in the img tag, and also made modifications in your CSS styles to achieve your desired output.这里我们将图片作为background image ，而不是在img标签中，并且还在您的CSS styles中进行了修改以达到您想要的Z78E6221F6393D1356681DB398F14CE6D。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.