带有 css 的响应层答案

【问题标题】：responsive layers with css带有 css 的响应层
【发布时间】：2021-09-28 19:53:58
【问题描述】：

我有 3 张图片。每层一个。每张图片必须改变它的大小并且仍然相对于彼此定位。第一层就像第二层的 i bg，第三层只是眩光前 bg 和第二层。我尝试了某种，但我的第二层宽度与父 div 不匹配。

<div class="parent">
 <img src="_/pic/bg.jpg" alt="" class="bg"/>
 <div class="cont">
   <img /> or some text
 </div>
 <img src="_/pic/shine.png" alt="" class="fr"/>
</div>

抱歉英语不好应该看起来像这样http://i5.photobucket.com/albums/y155/R_E_D/example.jpg

我也用

img {max-width: 100%;}

随意更改html和css

【问题讨论】：

不要使用图像，如果这些应该是背景图像，请将它们用作背景图像！这些可以应用于div 样式
背景大小：100%；不好的变种=(
您能否发布一个视觉示例来说明您想要实现的目标？我的意思是分层图像的实际最终效果。也许我们至少可以用 CSS3 解决方案来代替“闪耀”。
是的i5.photobucket.com/albums/y155/R_E_D/example.jpg
为了将第二层 (div.cont) 与第一层 (div.parent) 匹配，您可以使用 .parent{position:relative;} .parent .cont {position:absolute; top:0; right:0; left:0; bottom:0;}。但是如果没有您的 CSS 定义，就很难判断。

标签： html css responsive-design

【解决方案1】：

您的第二层不匹配，因为它与其他两层与parent div 的关系不同。第二层在 div 内。

此外，与img 不同，div 默认情况下是无量纲的。您还必须设置它们的宽度，使其可以像其他两层一样调整大小以匹配父 div。

鉴于上面的 HTML，试试这个 CSS：

img, .cont {max-width: 100%;}

【讨论】：

【解决方案2】：

尝试将图层放置在流体容器中，并使容器具有响应性，如果您还没有容器，请创建一个容器

.container {

  position: relative; /* Important */
  width: 200; /* Any width */
  height: 200; /* Any height */
  top: 0;
  left:0;
  margin:auto;

  }

然后在容器内的类中添加每一层，并确保在每一层中使用绝对位置。调整布局以提高响应能力，让容器发挥作用

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。