2016-06-09 6 views
-2

我一直在閱讀與我的問題類似尺寸的各種帖子,但沒有一個符合我的需求:我需要在響應式圖像上放置2個按鈕,可以去作爲一個網站的登錄頁面,到目前爲止我manged放置2個按鈕在圖片上即可使用,但調整它去梨形時,任何提示將在這裏感謝 是我的HTML:如何在響應式圖像上將2個按鈕置於中央位置

body { 
 
    background-image: url('../Images/Riverfront%20image.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
    background-size: 100%; 
 
} 
 
p { 
 
    color: orange; 
 
} 
 
.img-container { 
 
    height: 60px; 
 
    width: 140px; 
 
    position: absolute; 
 
    margin: -100px 0 0 -190px; 
 
    left: 52%; 
 
    top: 50%; 
 
} 
 
.img-container2 { 
 
    height: 60px; 
 
    width: 140px; 
 
    position: absolute; 
 
    margin: -100px 0 0 -20px; 
 
    left: 50%; 
 
    top: 50%; 
 
} 
 
.btn1 { 
 
    background: rgba(3, 105, 78, 0.7); 
 
    font-family: Arial; 
 
    color: #ffffff; 
 
    font-size: 20px; 
 
    width: 140px; 
 
    height: 60px; 
 
    position: absolute; 
 
    margin: -50px 0 0 -60px; 
 
    left: 62%; 
 
    top: 50%; 
 
} 
 
.btn { 
 
    background: rgba(3, 105, 78, 0.7); 
 
    font-family: Arial; 
 
    color: #ffffff; 
 
    font-size: 20px; 
 
    width: 140px; 
 
    height: 60px; 
 
    position: absolute; 
 
    margin: -50px 0 0 -50px; 
 
    left: 57%; 
 
    top: 50%; 
 
} 
 
.splash_header { 
 
    /* background-image: url('../Images/webLogo.png');*/ 
 
    width: 100%; 
 
    height: 120px; 
 
    z-index: 1; 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
    background-size: 20%; 
 
    background-color: yellow; 
 
}
<div class="container-fluid "> 
 
    <div class="row"> 
 
    <div class="splash_header"> 
 

 
     <div class="col-sm-6"> 
 
     <img src="../Images/webLogo.png" alt="my website logo"> 
 
     </div> 
 
     <div class="col-sm-6"> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
    <!-- end splash_header --> 
 
    <div class="row"> 
 
    <div class="img-container"> 
 
     <div class="col-sm-6"> 
 
     <div class="Cym"> 
 
      <input class="btn " type="button" value="Arabic" name="Button1" /> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="img-container2"> 
 
     <div class="col-sm-6"> 
 
     <input class="btn1 " type="button" value="English" name="Button2" /> 
 
     </div> 
 

 
    </div> 
 

 
    </div> 
 

 
</div>

ps:我已經把圖像作爲背景圖像的身體標籤做th在可取的情況下還是有另一種方法可以做到這一點?

+0

我以前多次做過這些事情解決了我的問題。你能上傳圖片嗎?它似乎並沒有加載 – Roysh

回答

-1

使用position屬性來做到這一點。 假設你有一個名爲一個div等是你需要把在當時這樣做:

div1{ default properties} 
div2{position:absolute;// or relative whatever you want 
    top:20px;// or required what you need 
    } 

點擊here瞭解更多詳情

0

試試這個

body { 
    background-image: url('../Images/Riverfront%20image.jpg'); 
    background-repeat:no-repeat; 
    background-size:contain; 
    background-size:100%; 
} 
p { 
    color: orange; 
} 
.img-container { 
    display: table; 
    margin:auto; 
} 

.btn1{ 
    background: rgba(3,105, 78, 0.7); 
    font-family: Arial; 
    color: #ffffff; 
    font-size: 20px; 
    width:140px; 
    height:60px; 
} 
.btn { 
    background: rgba(3,105, 78, 0.7); 
    font-family: Arial; 
    color: #ffffff; 
    font-size: 20px; 
    width:140px; 
    height:60px; 
} 
.btn-container { 
    display: inline-block; 
    float:left; 
} 
.splash_header 
{ 
    /* background-image: url('../Images/webLogo.png');*/ 
    width: 100%; 
    height: 120px; 
    z-index: 1; 
    background-repeat:no-repeat; 
    background-size:contain; 
    background-size:20%; 
    background-color: yellow; 
} 

這個DOM

`<div class="container-fluid "> 
     <div class="row"> 
     <div class="splash_header"> 
      <div class="col-sm-6"> 
       <img src="../Images/webLogo.png" alt="my website logo"> 
      </div> 
      <div class="img-container col-sm-12"> 
       <div class="col-sm-6 btn-container"> 
       <input class="btn " type="button" value="Arabic" name="Button1" />     
       </div> 
       <div class="col-sm-6 btn-container"> 
        <input class="btn1 " type="button" value="English" name="Button2" /> 
       </div> 
      </div> 
     </div> 
     </div><!-- end splash_header -->  
</div>` 

檢查此小提琴https://jsfiddle.net/qm22Lkb6/

+0

如果你想在背景有一個圖像,並保持它的響應嘗試添加'背景大小:包含;'或'背景大小:100%100%;' – Roysh

0

這個我如何使用骨架CSS和內部CSS

<!DOCTYPE HTML> 
<html> 
<head> 
<style> 
.lang-box 
{ 
    /*background: #FFFFEB none repeat scroll 0 0;*/ 
/* background-color: rgba(114, 107, 125, 0.6); 
*/  

background-color:rgba(0,73,26,0.36); 
border: 1px solid #858585; 
    border-radius: 5px; 
    color: gray; 
    font-family:"Gill Sans"; 
    font-weight:500; 
    /*cursor: pointer; 
*/ display: inline-block; 
    font-size: x-large; 
    line-height: 1em; 
    padding: 10px; 
    text-decoration: none; 
    width:1500px; 
} 
</style> 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css"> 
</head> 
<body> 
<div class="lang-box four columns offset-by-two"> 
<p style="text-align:center; margin-bottom:0"><input class="button button-primary" type="button" value="English"/></p></div> 
<div class="lang-box four columns "> 
<p style="text-align:center; margin-bottom:0"> <input class="button button-primary" type="button" value="Arabic"/></p></div> 
</div> 
</body> 
</html> 
相關問題