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

  • Z时代
  • 2024-01-10
  • 分类：问答

嗨，大家好我试图用引导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;所以给人们留下的侧部间隙看到图像中的背景

回答：

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

回答：

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 
}

以上是 如何在图像上创建一个白色背景 的全部内容， 来源链接： utcz.com/qa/263224.html

回到顶部