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

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

您可以在容器类上使用最小宽度和最大宽度。这个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
}