CSS HTML Position 绝对解决方案答案

【问题标题】：CSS HTML Position absolute solutionCSS HTML Position 绝对解决方案
【发布时间】：2018-02-02 21:17:19
【问题描述】：

我正在尝试创建响应式设计并使用绝对位置将我的图像放置在正确的位置。现在，有没有办法“锁定”两个图像以与屏幕大小一起调整大小？我必须使用@media 查询不断调整图像位置。

现在快把我逼疯了。我想要实现的是两个图像同时移动。

看看这个Fiddle 或看下面的演示：

body {
  margin: 0;
  padding: 0;
}

.wrapper {
  position: relative;
  left: 0;
  top: 0;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  overflow: hidden;
  max-width: 1200px;
}

.container {
  display: inline-block;
  max-width: 900px;
}

.absolutecontainerliquids {
  height: 450px;
}

.basecloudcontainer {
  position: relative;
}

.paddingtop {
  padding-top: 30px;
}

.liquids {
  position: absolute;
  left: 10%;
  z-index: 10;
  width: 80%;
}

.cloud {
  position: absolute;
  left: 0%;
  width: 100%;
  z-index: 1;
}

.darkgrey {
  background-color: #262626;
}

.lightgrey {
  background-color: #cfcdc7;
}

.page1 {
  z-index: 10;
}

.page2 {
  padding-top: 40px;
}

.firstimagetabletlogostripes {
  display: none;
}

.firstimagelogobottom {
  display: none;
}

.firstimagelogo {
  width: 64%;
  left: 18%;
  top: 27%;
  position: absolute;
  z-index: 1;
}

.blacktext {
  color: black;
}

.paragraph {
  text-align: center;
  padding: 0 30px;
}

@media screen and (min-width: 340px) {
  .firstimagelogo {
    width: 65%;
    top: 25%;
  }
}

@media screen and (min-width: 500px) {
  .firstimagelogo {
    width: 30%;
    top: 30%;
    left: 35%;
    z-index: 10;
  }
  .firstimagemlogostripes {
    visibility: hidden;
  }
  .firstimagetabletlogostripes {
    display: block;
    position: absolute;
    left: -35%;
    top: 0%;
    z-index: 2;
    width: 120%;
  }
}

@media screen and (min-width: 600px) {
  .firstimagetabletlogostripes {
    top: -10%;
    left: -40%
  }
}

@media screen and (min-width: 700px) {
  .wrapper {
    overflow: visible;
  }
  .absolutecontainerliquids {
    height: 650px;
  }
  .firstimagetabletlogostripes {
    top: -20%;
    left: -45%;
    width: 130%;
  }
}

@media screen and (min-width: 800px) {
  .firstimagetabletlogostripes {
    top: -50%;
    left: -50%;
    width: 130%;
  }
}

@media screen and (min-width: 900px) {
  .firstimagetabletlogostripes {
    top: -50%;
    left: -50%;
    width: 130%;
  }
}

@media screen and (min-width: 1000px) {
  .firstimagetabletlogostripes {
    top: -60%;
    left: -30%;
    width: 120%;
  }
  .firstimagelogo {
    width: 20%;
    top: 25%;
    left: 40%;
    z-index: 10;
  }
  .firstimagelogotop {
    display: block;
    position: absolute;
    top: -0%;
    left: 70%;
    width: 40%;
  }
  .firstimagelogobottom {
    display: block;
    position: absolute;
    top: 70%;
    left: 15%;
    width: 40%;
  }
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
  <title>Base - E-Liquid</title>
  <link href="styles.css" rel="stylesheet" type="text/css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <div class="wrapper darkgrey page1">
    <div class="container">
      <img class="firstimagemlogostripes" src="https://image.ibb.co/g5WJ66/mlogostripes.png" />
      <img class="firstimagetabletlogostripes" src="https://preview.ibb.co/gFnrR6/stripes.png" />
      <img class="firstimagelogo" src="https://image.ibb.co/gsPGtm/logofilled.png" />
      <img class="firstimagelogobottom" src="https://preview.ibb.co/gkXEeR/imagelogobottom.png" />
    </div>
  </div>



  <div class="wrapper lightgrey page2">
    <div class="container absolutecontainerliquids">
      <div class="paragraph blacktext">
        <p>Ecstatic advanced and procured civility not absolute put continue. Overcame breeding or my concerns removing desirous so absolute. My melancholy unpleasing imprudence considered in advantages so impression. Almost unable put piqued talked likely
          houses her met. Met any nor may through resolve entered. An mr cause tried oh do shade happy.
        </p>
      </div>
    </div>
</body>

</html>

【问题讨论】：

你想让第二张图片重叠在另一张上吗？？
是的，我确实希望图像转到第二页 :) 这是徽标和它背后的条纹让我苦苦挣扎：/
所以我认为您可以对它们进行 Photoshop 处理并将其与一张图像结合起来
我想我会这样做，我只是好奇是否有一个 css/html 解决方案：p
我也试过了，但要让它在所有设备上都能响应就很复杂。我认为 Photoshop 是这里最好的解决方案。

标签： html css css-position

【解决方案1】：

这是 HTML：

<div class="bck">
   <div class="image-1"></div>
</div>

还有 CSS：

.bck {
    background-image="image url"
}

.image-1 {
    margin-top: 40px
    margin-left: 40px
}

【讨论】：

【解决方案2】：

您可以使用 div 标签并将您的两个图像放入其中。如果您使用的是外部 css，则创建一个类并将该类应用于两个图像。

更新：

这是 Html 文件：

<div class="bck">
   <div class="image-1"></div>
 </div>

还有css：

.bck{
  background-image="image url"}

  .image-1{
   margin-top: 40px
   margin-left: 40px}

【讨论】：

你能给我和这里适用的实际代码示例吗？
参考下面的代码。这不是正确的代码，但您可以在其背后有逻辑。 @BareFeet
我已经在这个答案中添加了你的代码，请删除另一个以保持一切整洁。感谢您的回答，我会尝试并告诉您进展如何。