主页 / 问题 / 978156
Accepted
Flandered
Asked:2020-05-05 16:43:57 +0800 CST2020-05-05 16:43:57 +0800 CST

图片内的文字

  • 772

当站点的宽度减小时，铭文向左滑动，铭文的大小保持不变。这是它在移动设备上的外观（图片1）

在 1500 像素及以上的宽度下，一切都显示得很好。有没有办法在图像中添加铭文并使其具有响应性？这样它就不会在任何地方移动并在宽度根据图片变化时减小。还是有其他方法可以使其在小型设备上灵活使用？

图片1

这就是标题的显示方式

图.2

HTML：

<main>
    <div class="FLRBK2_img"><img src="Images/Adidas/Florens_RBK2.jpg"></div>
    <h1 class="MainText"><span>Always Be <br> Powerfull <br> for new <br> wins</span> </h1>

SCSS：

.FLRBK2_img {
    margin-top: 8px;
    text-align: center;
    position: relative;
}

.FLRBK2_img img {
    max-width: 100%;
}

.MainText {
    span {
        position: absolute;
        top: 130px;
        right: 550px;
        text-align: center;
        width: 100%;
        font-family: "Anton", cursive;
        font-size: 92px;
        color: rgba(14, 14, 14, 0.7);
        text-shadow: 1px 4px 6px rgba(0, 0, 0, 0.35);
    }
}
html

1 个回答

  1. Best Answer

    我没有图片，所以随便放一张。

    代码笔

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.FLRBK2_img {
  margin-top: 8px;
  text-align: center;
  position: relative;
}

.FLRBK2_img img {
  max-width: 100%;
}

.MainText span {
  position: absolute;
  top: 5%;
  left: 5%;
  font-family: "Anton", cursive;
  font-size: 92px;
  color: rgba(14, 14, 14, 0.7);
  text-shadow: 1px 4px 6px rgba(0, 0, 0, 0.35);
  width: max-content;
  text-align: center;
}
    <main>
  <div class="FLRBK2_img"><img src="https://picsum.photos/1920/1080"></div>
  <h1 class="MainText"><span>Always Be <br> Powerfull <br> for new <br> wins</span> </h1>
</main>

    • 0

相关问题