响应式图片背景：

Question

我正在努力使我的“Icon_POS_bitmap.png”响应。如果我在笔记本电脑上查看网站，图像将在底部被截断。我知道我不能将$slideshow = get_slideshow(); <?php if ($slideshow->num_rows > 0) { while($row = $slideshow->fetch_assoc()) { ?> <figure style="background-image:url(<?php echo '/photos/'.$row['image']; ?>)"></figure> <?php } } ?>放在固定的1000px高度上。但.hero-slides .single-hero-slides似乎不起作用。

当我尝试将内容设置为自动或100％时，图像会消失，并且后面的div“height: 100%; and height: auto;”位于顶部。

HTML

sonar-project-areas

CSS

<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>

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

我根据自己的需要修改它。我不时使用html / css / js，但我找不到问题。

问候阿德里安

Answer 1

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

响应式图片背景：

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

Answer 2

您正在尝试这样做，我将height: 100vh添加到主容器中，并将style="background: ...."移到.bg-img中的css内。我还在身体中添加了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>

如何使这个背景图像响应

2 个答案:

响应式图片背景：