Question

我是HTML和CSS的新手，正在尝试解决此作业问题：

在上面的全响应图像上显示灰色叠加背景，并通过用HTML和CSS编写代码，文本必须出现在全屏视图的中间。有两张图片，其中一张较小，用于移动设备，由HTML中的<picture>元素反射。

我从W3的这里和其他地方收集了一些建议，但无法弄清楚如何使叠加层适合图像尺寸，因此它不会溢出（当前在整个浏览器尺寸上左右都溢出，但看不到条子缩小浏览器窗口时显示在右侧）。
这是有关代码笔的完整代码：https://codepen.io/nyck33/pen/oJZjYx

经过编辑以反映给定答案中的建议：

HTML：

<div class="container">
  <div id="wrapper">
    <div class="overlay"></div>
        <picture>
            <source srcset="meBroken.jpg" media="(max-width: 600px)">
            <source srcset="macho.jpg" media="(max-width: 1500px)">
            <source srcset="meDad.jpg">
            <img src="macho.jpg" alt="macho men" style="width:auto;">
        </picture>
    <div class="centered">
        <p1 style="font-size:7vw">
            <font color="red">ACCELERATE</font> 
            <font color="white"><b>YOUR CAREER</b></font>
        </p1>
    </div>
  </div>    
</div>

CSS：

#wrapper {
    position: relative;
}
.overlay{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.5);
  z-index: 999;
}

预期结果是，覆盖尺寸与两个不同图像（一个用于PC，一个用于移动）完全匹配，并且没有上溢/下溢。

屏幕截图：

移动尺寸图片看起来很合适，但PC尺寸较大，尽管我将overlay设为wrapper的直接子代，但它仍然溢出了

Answer 1

由于您将overlay div设置为container的直接子元素，并且将其设置为绝对位置，因此它与wrapper元素无关

如果position属性设置为relative，则取决于container元素。

<div class="container">
    <div id="wrapper">
        <div class="overlay"></div>
        <picture>
            ... <!-- All content of your picture tag goes here -->
        </picture>
    </div>
</div>

您可以使用我在上面提供的代码，将overlay放置在wrapper div上，因为它设置为相对位置，而overlay是wrapper

的直系子级

.wrapper {
    position: relative;
    /** other css properties goes here */
}

.overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

HTML和CSS：全响应图像上带有文本的灰色覆盖背景

1 个答案: