Question

我一直在浏览与我的问题类似维度的各种帖子，但它们都不符合我的需求：我需要在响应式图像上放置2个按钮，我将用它作为网页的目标网页网站到目前为止，我设置了2个按钮放在图像上，但调整大小时，梨形状，任何提示将被赞赏这是我的HTML：

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>

P.s：我把图像作为背景身体标签的图像是否可取或者还有其他方法可以做到这一点？

Answer 1

试试这个

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/

Answer 2

这是我如何通过使用骨架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>

Answer 3

使用position属性来执行此操作。假设你有一个被调用的div，而另一个是你需要放弃然后这样做：

configManager

点击here了解详情

如何在响应式图像上集中放置2按钮

3 个答案: