似乎無法獲得適合全尺寸的背景圖像（HTML、CSS）

Question

我正在嘗試使用模板並遇到一些麻煩。 我將菜單欄更改為不同的樣式，但現在我無法擺脫灰色空間。 我希望圖像全寬。 代碼現在一團糟，所以我什至不知道該看什么。 問題是如何擺脫灰邊空間。 可能是什么問題呢？

 nav { float: right; shape-outside: polygon(0 0, 0 15%, 80% 15%, 80% 100%, 100% 100%, 100% 0%); background: black; clip-path: polygon(0 0, 0 15%, 80% 15%, 80% 100%, 100% 100%, 100% 0%); z-index: 6; position: relative; } ul { color: white; text-align: right; width:min-content; white-space:nowrap; } li { display: inline-block; padding: 1em; } ul li:nth-child(3)~li { float: right; clear: right; writing-mode: vertical-lr; } a { display: block; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; color: inherit } /*===== HEADER HERO =====*/ .single_slider { position: relative; height: 800px; z-index: 5; background-size: cover; background-position: center; /* optional */ } @media only screen and (min-width: 1400px) { .single_slider { height: 770px; } } @media (max-width: 767px) { .single_slider { height: 650px; } } .single_slider::before { position: absolute; content: ''; width: 100%; height: 100%; background-color: rgba(57, 36, 36, 0.5); top: 0; left: 0; z-index: -1; } .slider_content { padding-top: 80px; } .slider_content .title { font-size: 40px; font-weight: 700; color: #fff; } @media (max-width: 767px) { .slider_content .title { font-size: 24px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider_content .title { font-size: 34px; } } .slider_content p { margin-top: 25px; color: #fff; } .slider_content .main-btn { margin-top: 45px; } .slider-active .slick-dots { position: absolute; right: 3%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); text-align: center; } @media (max-width: 767px) { .slider-active .slick-dots { top: auto; bottom: 0; left: 0; right: 0; margin: auto; } } @media (max-width: 767px) { .slider-active .slick-dots li { display: inline-block; margin: 10px; } } .slider-active .slick-dots li button { width: 25px; height: 5px; background: none; background-color: rgba(255, 255, 255, 0.5); border-radius: 1px; font-size: 0; -webkit-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; border: 0; } .slider-active .slick-dots li.slick-active button { background-color: #fff; width: 45px; }

 <nav> <ul class="horizontal"> <li><a href="#">Work</a></li> <li><a href="#">About</a></li> <li class="far fa-circle"></li> <li><a href="#">Review</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <div id="home" class="header_hero slider-active"> <div class="single_slider bg_cover d-flex align-items-center" style="background-image: url(assets/images/slider/hh.jpg)"> <div class="container"> <div class="row"> <div class="col-lg-6 col-md-10 col-sm-11"> <div class="slider_content"> <h3 class="title" data-animation="fadeInUp" data-delay="0.2s">Mind Blowing Photograpy Web Template</h3> <p data-animation="fadeInUp" data-delay="0.6s">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> <a href="javscript:void(0)" class="main-btn main-btn-2" data-animation="fadeInUp" data-delay="0.9s">Download Now</a> </div> </div> </div> </div> </div>

Answer 1

要使圖像覆蓋整個背景，您可以使用background-size: cover 。 我還注意到你的nav在你的內容后面，要解決這個問題，你可以給它一個比single-slider更高的z-index 。 您還需要設置position否則z-index無效。

PS：我用占位符替換了您的背景以向您展示它的工作原理。

 nav { float: right; shape-outside: polygon(0 0, 0 15%, 80% 15%, 80% 100%, 100% 100%, 100% 0%); background: black; clip-path: polygon(0 0, 0 15%, 80% 15%, 80% 100%, 100% 100%, 100% 0%); z-index: 6; position: relative; } ul { color: white; text-align: right; width:min-content; white-space:nowrap; } li { display: inline-block; padding: 1em; } ul li:nth-child(3)~li { float: right; clear: right; writing-mode: vertical-lr; } a { display: block; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; color: inherit } /*===== HEADER HERO =====*/ .single_slider { position: relative; height: 800px; z-index: 5; background-size: cover; background-position: center; /* optional */ } @media only screen and (min-width: 1400px) { .single_slider { height: 770px; } } @media (max-width: 767px) { .single_slider { height: 650px; } } .single_slider::before { position: absolute; content: ''; width: 100%; height: 100%; background-color: rgba(57, 36, 36, 0.5); top: 0; left: 0; z-index: -1; }

 <nav> <ul class="horizontal"> <li><a href="#">Work</a></li> <li><a href="#">About</a></li> <li class="far fa-circle"></li> <li><a href="#">Review</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <div id="home" class="header_hero slider-active"> <div class="single_slider bg_cover d-flex align-items-center" style="background-image: url(https://picsum.photos/500)"> <div class="container"> <div class="row"> <div class="col-lg-6 col-md-10 col-sm-11"> <div class="slider_content"> <h3 class="title" data-animation="fadeInUp" data-delay="0.2s">Mind Blowing Photograpy Web Template</h3> <p data-animation="fadeInUp" data-delay="0.6s">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> <a href="javscript:void(0)" class="main-btn main-btn-2" data-animation="fadeInUp" data-delay="0.9s">Download Now</a> </div> </div> </div> </div> </div>

Answer 2

我不確定，但這可能會有所幫助：

img{
background-size: cover; 
}

Answer 3

你有沒有嘗試通過課堂獲得它？

     .single_slider.bg_cover.d-flex.align-items-center {

     background-repeat: no-repeat;
     background-size: auto;
     }

Answer 4

您在代碼中以風格使用背景圖像 url。

你試過這個代碼嗎？

<div class="single_slider bg_cover d-flex align-items-center" style="background-image: url(assets/images/slider/hh.jpg);background-size: cover;">