Question

如果我有一张图片让我们说有聊天对话。

我想在文本顶部叠加一个div，然后我想在div上放一些文字。

当我将浏览器重新缩小时，文本应该变小，但位置保持不变。反之亦然，当浏览器重新缩放时，文本会变得更大。

div可能是背景颜色，也应该像文本一样重新缩放。

我试过

.herotext span {
    position: absolute;
    bottom: 20px;
    font-family: 'museo_slab500';
    font-size: 150%;
    color: #fff;
    padding: 0 20px;
    width: 40%;
    line-height: 150%;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
}

但即使我重新缩放浏览器时我的文字会重新缩放，但我的白色背景div不能正确重新缩放，而当浏览器变小时，div不会重新缩放。

此实施的任何解决方案或想法？

Answer 1

您可以使用＆＃34; vw＆＃34;在您的文本CSS中设置相对于设备宽度的文本大小：

＆＃13;

.wrapper {
  background-image: url('http://lorempixel.com/output/abstract-q-c-640-480-5.jpg');
  background-size: cover;
  width: 100%;
}

.content {
  font-size: 2.5vw;
}

＆＃13;

<div class="wrapper">
  <div class="content">
    <span>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </span>
  </div>
</div>

＆＃13;

https://jsfiddle.net/o3fcczwb/1/

图像顶部的自适应文字覆盖

1 个答案: