时间戳

首页 > 解决方案 > 带有文本覆盖和背景颜色的背景图像甚至可以响应 4k 屏幕

html - 带有文本覆盖和背景颜色的背景图像甚至可以响应 4k 屏幕

问题描述

我正在尝试弄清楚如何使用背景图像和覆盖文本。那部分很容易。我遇到的问题是我还想要背景颜色，所以当屏幕宽度比图像宽时，我不想拉伸图像。我希望有一种背景颜色延伸到 100% 宽度。背景图像颜色与图像颜色的边缘相匹配，因此看起来图像只是在不断扩展。为此，我有下面列出的 jsfiddle 之类的东西。

我遇到的问题是理想情况下我希望文本与图像所在的位置对齐，而不是背景颜色，但随着屏幕尺寸的变化而变化。此外，当屏幕变小（例如平板电脑和手机）时，我希望图像相应缩小，但如果我将其设置为高度，背景颜色也会开始显示在图像下方。

https://jsfiddle.net/j1ktafd8/5/ 

<div class="container py-5">
        <div class="row justify-content-center" style="">
        <div class="overlay">


          This is the text.
          <p>
          Some more text.
          </div>
          </p>
        </div>
      </div>

.row {
  background: #34ca69 url('//via.placeholder.com/500') no-repeat center;
  height: 500px;
  color: grey;
  width: 100%;
}

.overlay {
  padding-left: 150px;
}

标签： htmlcss

解决方案

有多种方法可以实现这一目标。我可能会寻求这样的解决方案：

  1. 由于您希望背景颜色与背景图像元素具有相同的高度，因此具有背景颜色的元素需要从背景图像元素中获取其高度。这意味着，背景图像元素应该在具有背景颜色的元素内部。
  2. 背景图像元素为 100% 宽，但具有max-width. 这种成像方式永远不会变大并在较小的屏幕上缩小。
  3. 您需要使用 padding-bottom 技巧来设置背景图像元素的高度。您可以通过使用图像元素来避免这种情况，但这是语义问题。

https://jsfiddle.net/tvfr42ys/

推荐阅读