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

Question

嗨，大家好我试图用引导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。而且超出了这个范围。您可以在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 
}