我一直在阅读与我的问题类似尺寸的各种帖子,但没有一个符合我的需求:我需要在响应式图像上放置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