Question

我想获得如图1所示的结果，但是当我编码时，它通过在图像上左右设置边距来显示。它在某些分辨率上显示相同的结果但在所有分辨率下都不友好。我需要一个分辨率友好的布局，请告诉我如何实现这个目标：

我的代码是

/* Slider */

.slider-bg {
  background-image: url("http://www.design.earnandearn.com/zx-content/themes/default/media/img/grownstar-custom/slider_bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  border-bottom: 6px solid #E1B706;
  height: 415px;
}
.container {
  height: 415px;
  max-width: 1030px;
  margin: 0 auto;
}
.man {
  height: 415px;
  width: 542px;
  background-image: url(http://www.design.earnandearn.com/zx-content/themes/default/media/img/grownstar-custom/man.png);
  background-repeat: no-repeat;
  position: absolute;
  display: block;
  right: 0;
}
.sliderright {
  float: left;
  height: 344px;
}
.sliderright h3 {
  font-size: 39px;
  color: #6e8d30;
  margin-top: 60px;
}
.sliderright h2 {
  color: #7b33ad;
  font-size: 48px;
  font-weight: 600;
}
.sliderright p {
  font-size: 30px;
  margin-top: 20px;
  line-height: 1;
  margin-bottom: 15px;
}
.sliderright a.btn {
  background: none repeat scroll 0 0 #bae23d;
  color: #000;
  text-shadow: 0 1px 1px #000000;
  font-size: 18px;
  font-weight: 600;
  margin-top: 15px;
  margin-left: 0;
  border: none;
  width: 150px;
}
.sliderright small {
  display: block;
}

<div class="slider-bg">
  <div class="container">
    <div class="sliderright">
      <h3>Making Your Extra Money with</h3>
      <h2>Our Social Network</h2>
      <p>
        <small>Achieve your dream for the financial freedom !</small>
        Earn money Anywhere and Anytime
      </p>
      <a class="btn btn-warning" href="register.php">Signup Now !</a>

      <div class="man"></div>
    </div>
  </div>
</div>

Answer 1

只需将top: 0;添加到您的班级“.man”。

像：

.man {
  height: 415px;
  width: 542px;
  background-image: url(../img/grownstar-custom/man.png);
  background-repeat: no-repeat;
  position: absolute;
  display: block;
  right: 0;
  top: 0,
}

Tipp：如果您将带有<img> tag权限的图片放入.man div中，则不需要任何高度和宽度设置。 img将自动拉伸它。

你不应该把这个名字命名为“男人”。它不是男人......我认为这是一个女人。

Answer 2

试试这个： -

<div class="slider-bg">
  <div class="container">
    <div class="sliderright">
      <h3>Making Your Extra Money with</h3>
      <h2>Our Social Network</h2>
      <p>
        <small>Achieve your dream for the financial freedom !</small>
        Earn money Anywhere and Anytime
      </p>
      <a class="btn btn-warning" href="register.php">Signup Now !</a>


    </div>
       <div class="man" style="float:right;margin:-21px 6px 2px 9px;"></div>
  </div>
</div>

将图片man类div设置为sliderright类div并为其提供边距。

请参阅： - JSFiddle1

更新1 ： - 为position: relative;和.container类设置属性.sliderright。请参阅此更新的代码JSFiddle2。希望这会对你有所帮助！

文本块和图像上的图像

2 个答案: