如何使此背景图像响应

Question

我正在尝试使“ Icon_POS_bitmap.png”响应。 如果我在笔记本电脑上查看网站，则图像在底部被切除。 我知道我不能将.hero-slides .single-hero-slides固定在.hero-slides .single-hero-slides高度上。 但是height: 100%; and height: auto; height: 100%; and height: auto; 似乎不起作用。

当我尝试将其设置为自动或100％时，图像消失，并且以下div“ sonar-project-areas ”位于顶部。

的HTML

<section class="hero-area">
  <div class="hero-slides">
    <!-- Single Hero Slide -->
    <div class="single-hero-slide bg-img slide-background-overlay" style="background-image: url(img/bg-img/Icon_POS_bitmap.png);">
    </div>
  </div>
</section>

的CSS

.hero-slides .single-hero-slide {
    height: 1000px;
    width: 100%;
    position: relative;
    z-index: 1;
    -webkit-transition-duration: 800ms;
    transition-duration: 800ms;
    overflow: visible;
    /*cursor: pointer; */
}

.hero-slides .single-hero-slide .hero-slides-content {
    position: relative;
    z-index: 1;
    -webkit-transform: translateY(75%);
    transform: translateY(75%);
    -webkit-transition-duration: 800ms;
    transition-duration: 800ms;
    bottom: 0;
}

.hero-slides .single-hero-slide .hero-slides-content .line {
    width: 100px;
    height: 1px;
    background-color: #ffffff;
    margin-bottom: 30px;
    display: block;
}

.hero-slides .single-hero-slide .hero-slides-content h2 {
    color: #ffffff;
    font-weight: 100;
}

.hero-slides .single-hero-slide .hero-slides-content p {
    color: #ffffff;
    margin-bottom: 0;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    margin-top: 140px;
}

.hero-slides .single-hero-slide:hover .hero-slides-content {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
}

.hero-slides .single-hero-slide:hover p {
    margin-top: 40px;
}

.bg-img {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.slide-background-overlay {
    position: relative;
    z-index: 1;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
}

.slide-background-overlay::after {
    content: '';
    position: absolute;
    height: 60%;
    width: 100%;
    z-index: -1;
    bottom: 0;
    left: 0;
}

我使用的原始模板是这样的： https : //colorlib.com/wp/template/sonar/

我根据需要对其进行了修改。 我不时使用html / css / js，但找不到问题。

问候阿德里安

Answer 1

您似乎正在尝试创建响应式背景图像。 如果是这种情况，您会在下面找到有关操作方法的快速提示。

---

响应图像背景：

1. 我们首先像<div class="single-hero-slide bg-img slide-background-overlay"></div>一样为背景创建一个容器
2. 接下来，使用width和height CSS属性设置高度和/或宽度
3. 之后，选择要用作背景的图像并使用background-size: cover 或 contain

 .bg-img { width: 30vw; height: 100vh; background: url('https://images.pexels.com/photos/1034677/pexels-photo-1034677.jpeg?cs=srgb&dl=adult-art-man-1034677.jpg&fm=jpg'); background-size: cover; } 

 <div class="single-hero-slide bg-img slide-background-overlay"></div> 

这是此属性的参考： https : //developer.mozilla.org/en-US/docs/Web/CSS/background-size

Answer 2

这就是您要执行的操作，我在主容器中添加了height: 100vh ，并在.bg-img的CSS内移动了style="background: ...." 。 我还添加了margin: 0; padding: 0 margin: 0; padding: 0到身体

 body { margin: 0; paddong: 0; } .hero-slides .single-hero-slide { height: 100vh; /* You can change this to 50vh (50% of the screen width) and will still be responsive */ width: 100%; position: relative; z-index: 1; -webkit-transition-duration: 800ms; transition-duration: 800ms; overflow: visible; /*cursor: pointer; */ } .hero-slides .single-hero-slide .hero-slides-content { position: relative; z-index: 1; -webkit-transform: translateY(75%); transform: translateY(75%); -webkit-transition-duration: 800ms; transition-duration: 800ms; bottom: 0; } .hero-slides .single-hero-slide .hero-slides-content .line { width: 100px; height: 1px; background-color: #ffffff; margin-bottom: 30px; display: block; } .hero-slides .single-hero-slide .hero-slides-content h2 { color: #ffffff; font-weight: 100; } .hero-slides .single-hero-slide .hero-slides-content p { color: #ffffff; margin-bottom: 0; -webkit-transition-duration: 500ms; transition-duration: 500ms; margin-top: 140px; } .hero-slides .single-hero-slide:hover .hero-slides-content { -webkit-transform: translateY(0%); transform: translateY(0%); } .hero-slides .single-hero-slide:hover p { margin-top: 40px; } .bg-img { background-image: url("https://picsum.photos/5472/3648?image=1074"); background-position: center center; background-size: cover; background-repeat: no-repeat; } .slide-background-overlay { position: relative; z-index: 1; bottom: 0; left: 0; width: 100%; height: 60%; } .slide-background-overlay::after { content: ""; position: absolute; height: 60%; width: 100%; z-index: -1; bottom: 0; left: 0; } 

 <section class="hero-area"> <div class="hero-slides"> <!-- Single Hero Slide --> <div class="single-hero-slide bg-img slide-background-overlay"> </div> </div> </section>