如何在图像上创建白色背景

Question

大家好我想用 bootstrap 3 创建这个效果：

黑色是随机图像，然后只是白色条带我可以放我的文字等。

到目前为止，我有这个：

HTML：

<div class="parallax">
  <div class="container">
    <h1> Testing </h1>
  </div>
</div>

CSS

.parallax {
  background-image: url("../img/c.jpg");
  min-height: 1000px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.container {
  width: 800px;
}

然而，无论我为容器更改宽度，它都不会变得更小，只是它内部的文本。

所以我再次想要一个背景图像覆盖整个浏览器然后只是一个白色条带下来但宽度约为800px;因此它会在侧面留下空隙以在背景中看到图像

Answer 1

您可以在容器类上使用 min-width 和 max-width 。通过设置ensures that when your browser is resized the sides are still visible来width of the container to a relative (%) value。除此之外的max-width limits it from extending。您可以在CSS中position the container using transform property并为容器创建一个动画来自顶部，并将其位置设置为网页的垂直中心。

就背景而言，您可以根据需要将宽度或高度设置为100vw，100vh甚至％。这只是一个示范。

.parallax {
  background-image: url("http://via.placeholder.com/300x100");
  height: 100vh;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -300px;
  background: white;
  color: black;
  min-width: 70%;
  max-width: 800px;
  height: 100px;
  text-align: center;
  animation: expand 2s linear forwards;
}

@keyframes expand {
  0% {}
  100% {
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

<div class="parallax">
  <div class="container">
    <h1> Testing </h1>
  </div>
</div>

Answer 2

HTML

<div class="parallax">
    <div class="cont">
        hellowold
    </div>
</div>

CSS

.parallax {
    width: 100%;
    height: 500px;
    position: relative; // this is necessary
    background: #000;
}
.cont {
    position: absolute;
    width: 100%; // for responsive it will take 100% width
    max-width: 800px; // for bigger screen it will be max 800px
    padding: 15px; // just for decoration
    background: #fff;
    box-sizing: border-box; 
    margin: 0 auto; // absoluted element center purpose
    bottom: 0; // positioning at the bottom as per your image
    left: 0; // absoluted element center purpose
    right: 0;// absoluted element center purpose
    text-align: center; // just for decoration
}