标题图像与背景重复：封面；。 我怎样才能解决这个问题？

Question

我的目标是创建一个面包店网站，因此标题和图像，并且该网站不会发布到任何服务器。 我希望在我的页面顶部的导航菜单下方有一个图像，当我调整窗口大小时，该图像保持相同的纵横比，但它要求没有高度规范，否则当我放大时图像会被裁剪窗口，以及水平重复。 这是我到目前为止的代码：

 window.onscroll = function() {myFunction()}; var navbar = document.getElementById("navbar"); var sticky = navbar.offsetTop; function myFunction() { if (window.pageYOffset >= sticky) { navbar.classList.add("sticky") } else { navbar.classList.remove("sticky"); } }

 .header-img { height: 370px; width: 100%; background-repeat: no-repeat; background: url('https://static.dezeen.com/uploads/2019/12/flourist-bakery-ste-marie-vancouver-canada_dezeen_hero-b.jpg'); background-size: contain; } body { background-color:white; margin: 0; padding: 0; text-align:center; } .sticky + .content { padding-top: 60px; } .content { padding: 16px; } .sticky { position: fixed; top: 0; width: 100%; } .menu { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #000000; } .li { float: left ; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; } .liname { float: left; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 26px } li a { display: block; color: white; text-align: center; padding: 16px; text-decoration: none; } body { margin: 0; text-align: center; }

 <link rel="icon" href="https://cakesreanimated.com/wp-content/uploads/2020/01/favicon-cakes-reanimated.png"> </br> <div id="navbar"> <nav> <ul class="menu"> <li class="liname"> <a>Bakes n' Cakes</a> </li> <li class="li"> <a href ="bakerysite.html">Home</a> </li> <li class="li"> <a href ="about.html">About</a> </li> <li class="li"> <a href ="prices.html">Prices</a> </li> <li class="li"> <a href ="contact.html">Contact</a> </li> </ul> </nav> </div> <main> <div class="header-img" id=#header></div> </main> </br>

Answer 1

您需要将 background-size 设置为覆盖在您的 css 中，如下所示。

您可以使用 background-position 属性更改图像的位置。

更多信息：

https://www.w3schools.com/cssref/css3_pr_background-size.asp https://www.w3schools.com/cssref/pr_background-position.asp

 window.onscroll = function() {myFunction()}; var navbar = document.getElementById("navbar"); var sticky = navbar.offsetTop; function myFunction() { if (window.pageYOffset >= sticky) { navbar.classList.add("sticky") } else { navbar.classList.remove("sticky"); } }

 .header-img { height: 370px; width: 100%; background-repeat: no-repeat; background: url('https://static.dezeen.com/uploads/2019/12/flourist-bakery-ste-marie-vancouver-canada_dezeen_hero-b.jpg'); background-size: cover; } body { background-color:white; margin: 0; padding: 0; text-align:center; } .sticky + .content { padding-top: 60px; } .content { padding: 16px; } .sticky { position: fixed; top: 0; width: 100%; } .menu { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #000000; } .li { float: left ; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; } .liname { float: left; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 26px } li a { display: block; color: white; text-align: center; padding: 16px; text-decoration: none; } body { margin: 0; text-align: center; }

 <link rel="icon" href="https://cakesreanimated.com/wp-content/uploads/2020/01/favicon-cakes-reanimated.png"> </br> <div id="navbar"> <nav> <ul class="menu"> <li class="liname"> <a>Bakes n' Cakes</a> </li> <li class="li"> <a href ="bakerysite.html">Home</a> </li> <li class="li"> <a href ="about.html">About</a> </li> <li class="li"> <a href ="prices.html">Prices</a> </li> <li class="li"> <a href ="contact.html">Contact</a> </li> </ul> </nav> </div> <main> <div class="header-img" id=#header></div> </main> </br>

要在 width:100% 时保持纵横比，请在 .header-img div 中使用常规图像并像这样修复 css：

.header-img {
  width: 100%;
}

.header-img img {
  width:100%;
  height:auto;
}

对不起，如果我误解了。