如何在圖像上創建一個白色背景

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 
}