中心按鈕背景圖像的容器

內我已成功地在地方得到正確的按鈕圖像，但現在的定位是全部關閉。中心按鈕背景圖像的容器

我希望它爲中心，因爲這圖片顯示：

我至今在這裏：http://codepen.io/anon/pen/snjCu。

我想圖像定位其列在中心內，使其正確就位時，屏幕越大。

任何幫助表示讚賞。

<footer> 
     <div class="banner"> 
     <div class="container-fluid"> 
      <div id="footer-controls" class="text-center"> 
      <div class="col-xs-4"><i class="fa fa-picture-o"></i> 
       <span>GALLERY</span> 
       </div> 
       <div class="col-xs-4"> 
       <a href="#" class="orange-button"></a> 
       </div> 
      <div class="col-xs-4"><i class="fa fa-file-text-o"></i> 
       <span>LEGAL</span> 
       </div> 
      </div> 
     </div> 
     </div> 
    </footer> 

footer #footer-controls .orange-button { 
background: url('http://i.imgur.com/lmB72tf.png') no-repeat; 
width: 215px; 
height: 210px; 
background-size: 100%; 
position: absolute;; 
top: -50px 
}

來源

2014-06-17 AntonB

https://gist.github.com/anonymous/effef47b6bca698d07eb試試這個 – banditpanda

您可以調整使用CSS圖像的位置變換

Codepen Demo

footer #footer-controls .orange-button { 
    background: url('http://i.imgur.com/lmB72tf.png') no-repeat; 
    width: 215px; 
    height: 210px; 
    background-size: 100%; 
    position: absolute; 
    top: -50px; 
    left:50%; /* push the image half-way over */ 
    transform:translateX(-50%); /* bring it back half its own width */ 
    /* or margin-left: -50% of image width */ 
}

來源

2014-06-17 14:05:18

工作得很好，是否有任何限制瀏覽器支持與變換？ – AntonB

IE9和up（http://caniuse.com/ transforms2d），但如果你使用的是特徵檢測，可選的'negative margin'可以工作，但是它確實需要你知道變換沒有的圖像的大小。 –

雖然不理想，我發現，給列和橙色按鈕固定width樣式將解決這個問題。

.orange-button { 
background-image: url('http://i.imgur.com/lmB72tf.png'); 
background-repeat: no-repeat; 
background-size: 215px 210px; 
display:inline-block; 
width: 215px; 
height: 210px;

來源

2014-06-17 13:28:56 DevlshOne

你能解釋一下嗎？我希望列保持寬度引導已經設置，以便它在屏幕上正確調整。 – AntonB

剛剛試過這個，它破壞了頁腳並擴展它:( – AntonB

通常你可以居中背景圖片：
背景位置：中心中心;
這實際上是默認值。

然而，隨着圖像的容器不居中。
您可能想考慮重新定位容器，並嘗試其他東西比
position：absolute;

來源

2014-06-17 13:30:16

可以提供替代嗎？ – AntonB

中心按鈕背景圖像的容器

回答

相關問題