我一直在閱讀與我的問題類似尺寸的各種帖子,但沒有一個符合我的需求:我需要在響應式圖像上放置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在可取的情況下還是有另一種方法可以做到這一點?
我以前多次做過這些事情解決了我的問題。你能上傳圖片嗎?它似乎並沒有加載 – Roysh