似乎无法获得适合全尺寸的背景图片 (HTML,CSS)

Question

我正在尝试使用模板，但遇到了一些麻烦。我将菜单栏更改为不同的样式，但现在我无法摆脱灰色 space。我希望图像全宽。代码现在一团糟，所以我什至不知道要看什么。问题是如何摆脱灰色边缘 space。可能是什么问题？

 
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

我不确定，但这可能会有所帮助：

img{
background-size: cover; 
}

Answer 2

你试过用class得到它吗？

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

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

Answer 3

您在代码中使用了背景图像url。

你试过这个代码了吗？

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

Answer 4

要使图像覆盖整个背景，您可以使用 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>

似乎无法获得适合全尺寸的背景图片 (HTML,CSS)

Can't seem to get a background image to fit full size (HTML,CSS)

html

css

menu

margin