将响应式网页设计与许多 background-images

Question

我是图像前端集成的新手。

我怎样才能创建下图中的两个面板之一，以便在用户拉伸 window 时将文本、按钮和标题保持在正确的位置？

我想过不同的方法来完成它：

Using a single picture as a background and relatively positioning texts for heading, content and clickable area of the panel as absolute divs.

Or cutting heading, button and panel images and make them divs with their respective background-image and position the div themselves with text inside them.

这是我想要实现的结果的图片：

我得到的图像：

完整面板：

我还有横幅、背景和按钮。

也许还有其他我没想到的整合方式？

欢迎各种方法:)

感谢您的帮助！

Answer 1

我拍摄了您的图片并添加了 header、说明和按钮。定位可以很容易地完成。带有 flex 的容器用于响应式设计（div 包装）。运行代码片段并调整 window 的大小以查看：

/* Padding: 0; for no padding in the edges */

* {
  padding: 0;
}

#container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background: #654321;
}

/*
  This content is for the mobile version START
*/

.image {
  position: relative;
  text-align: center;
  margin: 1em;
}

.imageHeader {
  position: absolute;
  top: 1%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.imageText {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.imageButton {
  position: absolute;
  left: 50%;
  bottom: 1.5%;
  font-size: 20px;
  background: none;
  border: none;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

img {
height: auto;
}

/*
  This content is for the mobile version END
*/

/*
  media only screen with min-width for mobile first! 
  
  The code below is for the Computer Version!!!
*/

@media only screen and (min-width: 800px) {

.image {
  position: relative;
  text-align: center;
  margin: 1em;
}

.imageHeader {
  position: absolute;
  top: 3%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.imageText {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.imageButton {
  position: absolute;
  left: 50%;
  bottom: 3.5%;
  font-size: 20px;
  background: none;
  border: none;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
img {
height: 500px;
}
}

<div id="container">

  <div class="image">
    <h2 class="imageHeader">Header</h2>
    <img src="https://i.stack.imgur.com/vHqR7m.png">
    <p class="imageText">Description</p>
    <button class="imageButton">Buy .99</button>
  </div>
  
  <div class="image">
    <h2 class="imageHeader">Header</h2>
    <img src="https://i.stack.imgur.com/vHqR7m.png">
    <p class="imageText">Description</p>
    <button class="imageButton">Buy .99</button>
  </div>
  
</div>

将响应式网页设计与许多 background-images

Integrating responsive webdesign with lot of background-images

html

css

css-position

responsive-design

responsive