如何在另一個背景圖像上將一個圖像設置爲中心底部

您好，我試圖在另一個背景圖像上將一個圖像設置爲中心底部。如何在另一個背景圖像上將一個圖像設置爲中心底部

圖像包含一個（ktm）自行車背景圖像和另一個在中心底部的汽車圖像）。

我也嘗試了背景位置屬性作爲中心底部，但仍然不工作。我不知道該怎麼做。我在評論框中提供了我正在嘗試製作的圖片，請參閱該圖片不要忽略。還提供了我的代碼，我已經嘗試過了。請任何人都可以給我演示我如何對不起，但我真的是新的級聯樣式表。我需要使用絕對財產嗎？

的jsfiddle：jsfiddle.net/vr50vza2/1

.f4-pos { 
 
    position: absolute; 
 
    background-position: center bottom; 
 
} 
 

 
.footer { 
 
    background-image: url("../images/footer.png"); 
 
} 
 

 
.foot4 { 
 
    background-image: url("../images/iauro-footer-logo.png"); 
 
} 
 

 
.ban { 
 
    height: 800px; 
 
    background-size: 100% 100%; 
 
} 
 

 
.im3 { 
 
    height: 100px; 
 
    width: 300px; 
 
} 
 

 
.norep { 
 
    background-repeat: no-repeat; 
 
}

<div class="footer ban norep"> 
 
    <div class="foot4 f4-pos im3 norep"></div> 
 
</div>

來源

2017-03-09 Arch

請在您的問題中添加圖片或代碼，以便更好地理解您的問題 – Swellar

@Carl Jan請參考此圖片進行版面設計https://ibb.co/dHZqGF這是我的代碼我已經嘗試https://jsfiddle.net/vr50vza2/1/ – Arch

更好，如果你把它放在你的問題 – Swellar

喜歡這個？我刪除了一些不必要的CSS和圖像，但您可以稍後返回它們。

.footer { 
 
    position: relative; 
 
    border: 1px solid red; 
 
} 
 

 
.foot4 { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 50%; 
 
    transform: translate(-50%, 0); 
 
} 
 

 
.ban { 
 
    height: 500px; 
 
} 
 

 
.im3 { 
 
    height: 100px; 
 
    width: 200px; 
 
    background-color: blue; 
 
}

<div class="footer ban norep"> 
 
    <div class="foot4 f4-pos im3 norep"></div> 
 
</div>

來源

2017-03-09 08:00:52 Swellar

可以通過使用背景圖片顯示我，也可以嘗試使用背景大小：中心底部屬性 – Arch

我沒有圖片空餘，您可以自己嘗試，只需刪除'background-color'，然後添加'background- image'。真的有必要使用'background-size：center bottom'嗎？ – Swellar

是否可以垂直移動此紅色塊。？我想這個塊從頂部移動，所以有可能我已經嘗試過但不工作。像這樣在例如 - 在腳4班我想使浮動：30％;頂部：40像素; – Arch

請查看FIDDLE：https://jsfiddle.net/NayanaDas/jw3dqb71/

.f4-pos 
{ 
    position: absolute; 
    background-position:center bottom; 
} 
.footer1 
{ 
    background-image: url("http://pre09.deviantart.net/49b5/th/pre/i/2015/160/1/9/skies__backround_practice__by_darklatias61-d8wm1wr.png"); 
} 
.foot4 
{ 
    text-align: center; 
    position:fixed; 
    bottom:0; 
    width: 100%; 
    height:50px; 
    background-image: url("http://backgrounds.mysitemyway.com/wp-content/uploads/2009/03/watercolor-grunge-000100-glossy-rust.jpg"); 
    background-size:100%; 

} 
.ban 
{ 
    height: 800px; 
    background-size:100% 100%; 
} 
.im3 
{ 
    height: 100px; 
    width : 300px; 
} 
.norep 
{ 
    background-repeat: no-repeat; 
} 
.footerWrap { 
    width:100%; 
    position:fixed; 
    bottom: 0px; 
} 
.footer { 
    width:400px; 
    margin:auto; 
} 
.footerContent { 
    float:left; 
    width:100%; 
    padding:20px 0; 
} 
.footer p {float:left; width:100%; text-align:center; }

來源

2017-03-09 08:06:35

另一個圖像不顯示在小提琴 – Arch

哪些圖像？頁腳圖像？ –

這裏的主要背景圖像和頁腳圖像是可見的。 –

你可以用CSS Flexboxes做到這一點。請參閱下面的代碼。請注意，魔術在＃img2Container的CSS中。另請參閱JSFiddle。

<!doctype html> 
<html> 
    <head> 
     <style type="text/css"> 
      html, body { 
       margin: 0px; 
       padding: 0px; 
       height: 100%; 
      } 
      #img1 { 
       width: 100%; 
       height: 100%; 
      } 
      #img2Container { 
       position: absolute; 
       bottom: 0px; 
       height: 100px; 
       width: 100%; 

       display: -webkit-flex; 
       display: flex; 
       -webkit-flex-direction: row; 
       flex-direction: row; 
       -webkit-justify-content: center; 
       justify-content: center; 
      } 
      #img2 { 
       width: 100px; 
       height: 100px; 
      } 
     </style> 
    </head> 
    <body> 
     <img id="img1" src="http://lorempixel.com/600/600/" /> 
     <div id="img2Container"> 
      <img id="img2" src="http://lorempixel.com/100/100/" /> 
     </div> 
    </body> 
</html>

這是合理的相信，你也可以將圖像包裝在另一個元素中，並使用margin：0 auto。但是，由於CSS Flexboxes的靈活性，我更喜歡這種方法，因此您可以將多個圖像居中並讓它們均勻居中。

請注意，img2Container具有絕對位置，這意味着它會隨頁面一起滾動。如果您願意，可以將其設置爲粘性，以便將查看窗格中的剩餘物放置到視圖窗格而不是文檔中。

來源

2017-03-09 08:11:00

如何在另一個背景圖像上將一個圖像設置爲中心底部

回答

相關問題