如何增加我的背景圖像和位置的高度按鈕

 <div class = "LeftMain" > 

       <a href = "#" > <button>Go</button></a> 



     </div> 


.LeftMain{ 

    float: left; 
    width: 600px; 
} 



.LeftMain { 
    background: url(Astronaut.jpg); 
    background-size: 100%; 
    background-repeat: no-repeat; 
}

我正在創建一個迷你項目，並且我正在嘗試創建一個按鈕出現在背景圖像前面，但這並不真正起作用只顯示背景圖像的頂部部分以及「Go」按鈕。我已經將該部分作爲其兩部分進行了浮動，但我現在只是在談論左側。那麼如何使背景圖像中心的按鈕顯示完整的背景圖像？如何增加我的背景圖像和位置的高度按鈕

來源

2015-06-20 el mashrafi

你的意思是這樣的嗎？

.container { 
 
    width: 200px; 
 
    height: 200px; 
 
    position: relative; 
 
    background: url(http://www.indiacrunch.in/wp-content/uploads/2014/11/Astronaut-in-India.jpg); 
 
    background-size: cover; 
 
    background-position: center; 
 
} 
 
.container button { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<div class="container"> 
 
    <button>Go</button> 
 
</div>

來源

2015-06-20 12:02:26

是這樣的，但我已經創造了一個div容器你看，我創建了一小部分在容器中與在中心的按鈕，不同的背景照片。 –

那麼，最新的問題是什麼？如果您只看到小背景，那是因爲您的部分（按鈕父）沒有足夠的高度。它取決於按鈕的高度。嘗試添加'高度'你的'。 LeftMain'。 –

如何增加我的背景圖像和位置的高度按鈕

回答

相關問題