我想使用像我張貼的底部的曲線圖像

enter image description here 我想使用像我張貼的底部的曲線圖像

我想創建此。

我到目前爲止是這樣的，但它不響應屏幕尺寸的變化。它保持在特定的寬度，這就是爲什麼我想用圖像替換它

<div class="container-fluid"> 
    <div class="betn-footer"> 
    </div> 
</div> 

.betn-footer{ 
    background-color:#f4f3f3; 
    height:50px; 
    text-align:center; 
    position:absolute; 
    border-bottom-left-radius:50%; 
    border-bottom-right-radius:50%; 
    margin-top:-20px; 
    margin-left:65px; 
    width:973.88px; 
    box-shadow: 0 21px 30px -10px #080808; 
}

告訴我是否有其他選項可以做到這一點。謝謝！

來源

2016-05-31 parish parab

您可以從一組'px'寬度寬度更改爲''％。 – Albzi

我試過這個，但是對於每個屏幕尺寸，我必須更改左邊距 –

您是使用引導還是您自己的「容器流體」類？ – thepio

只是刪除您的固定寬度和邊距：

.container-fluid { margin-bottom: 2em; } 
 

 
.betn-footer { 
 
    background-color: #f4f3f3; 
 
    height: 50px; 
 
    border-bottom-left-radius: 50%; 
 
    border-bottom-right-radius: 50%; 
 
    box-shadow: 0 21px 30px -10px #080808; 
 
}

<div class="container-fluid" style="width:200px;"> 
 
    <div class="betn-footer"></div> 
 
</div> 
 

 
<div class="container-fluid" style="width:500px;"> 
 
    <div class="betn-footer"></div> 
 
</div> 
 

 
<div class="container-fluid" style="width:1000px;"> 
 
    <div class="betn-footer"></div> 
 
</div>

來源

2016-05-31 11:43:29

Thakyou我給了相同的寬度，並把保證金：自動爲兩個div感謝您的建議 –

您不應該使用margin-left，而應該使用margin：0 auto將頁腳/您的內容居中。然後，你可以通過使用％

來源

2016-05-31 11:20:58 olop01

IMG.displayed { 
    display: block; 
    margin-left: auto; 
    margin-right: auto } 
... 
<IMG class="displayed" src="..." alt="...">

它會永遠顯示在頁面中央的圖片您的頁腳寬度設置爲一個靈活的寬度。

來源

2016-05-31 11:31:08

我想使用像我張貼的底部的曲線圖像

回答

相關問題