Question

我想将一张图片放在另一张图片上方，但我找到的所有答案都使用了具有特定像素的绝对位置。我希望以响应方式实现它，所以我想避免严格的构成。

现在我的代码如下：

 <style>
    .header{
      margin:20px;
      text-align:center;
    }
    .data{
      text-align:center;
    }
</style>
<body>
    <h1>Hello Stack Overflow!</h1>
    <div class="header">
      <img src="http://lorempixel.com/g/800/200/" class="background">
      <img src="http://lorempixel.com/100/100/" class="logo">
    </div>
    <div class="data">
      <label>enter your name</label>
      <input>
    </div>

我想将.logo img移到background img之上，并有不同的类来移动它：

中心;
中右;
左中;

所以，我的目标是有可能用一个可以“移动”我的徽标的类来完成下面的图像，但始终将它保持在背景图像之上。请注意，背景图像的大小可能并不总是相同。

Goal

我做了a plunkr to test with where you can reproduce it。

Answer 1

也许是这样的？

http://plnkr.co/edit/wd6wui?p=preview

<style>
.header {
  margin: 20px;
  text-align: center;
  position: relative;
}

.img-container {
  position: absolute;
  top: 0;
  width: 100%;
}

.data {
  text-align: center;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

<div class="header">
    <div class="img-container">
        <img src="http://lorempixel.com/g/800/200/" class="background">
    </div>
    <div class="img-container">
        <img src="http://lorempixel.com/100/100/" class="logo">
    </div>
</div>

不确定我理解你的问题;）

Answer 2

虽然这个答案使用绝对定位，但它具有响应性，应该以您想要的方式工作。这个答案还假设您拥有高质量的背景图像，在缩放到大尺寸时不会失去质量。

默认情况下，徽标居中。侧面定位有一个.logo-right和.logo-left类。

当背景图像的高度小于徽标时，有一个小边缘表示徽标在小屏幕上突然出现。为了解决这个问题，您可以将徽标宽度设置为百分比，并为其指定最大宽度，以便在使用栅格化（非svg）徽标时不会放大太多（请参阅代码段）。

.header {
  margin:20px;
  text-align:center;
  position: relative;
}

.data{
  text-align:center;
}

.background {
  height: auto;
  width: 100%;
}

.logo {
  bottom: 0;
  height: 50%;
  left: 0;
  margin: auto;
  max-height: 100px;
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
}

.logo-right {
  margin-right: 5%;
}

.logo-left {
  margin-left: 5%;
}

<h1>Centered</h1>
<div class="header">
  <img src="http://lorempixel.com/g/800/200/" class="background">
  <img src="http://lorempixel.com/100/100/" class="logo">
</div>
<div class="data">
  <label>enter your name</label>
  <input>
</div>
<h1>Right</h1>
<div class="header">
  <img src="http://lorempixel.com/g/800/200/" class="background">
  <img src="http://lorempixel.com/100/100/" class="logo logo-right">
</div>
<div class="data">
  <label>enter your name</label>
  <input>
</div>
<h1>Left</h1>
<div class="header">
  <img src="http://lorempixel.com/g/800/200/" class="background">
  <img src="http://lorempixel.com/100/100/" class="logo logo-left">
</div>
<div class="data">
  <label>enter your name</label>
  <input>
</div>

Answer 3

将图像包装在div中将完成工作

  <div><img src="http://lorempixel.com/100/100/" class="logo"></div>

使用响应性将图像定位在另一个上方

3 个答案: