本文将介绍如何使用 CSS 将文字精准地定位在响应式 mockup 图片的指定位置，并确保文字能够随着图片大小的改变进行自适应缩放。通过结合 position: absolute 和 transform 属性，以及一些响应式布局技巧，我们可以实现文字始终居中于图片特定区域的效果，从而避免因屏幕尺寸变化导致的错位问题。
方案概述
核心思路是使用 position: absolute 将文字元素从文档流中移除，然后通过 top、left、transform 属性将其精确地放置在图片上的目标位置。为了保证响应式效果，需要将定位的基准设置为图片容器，并使用百分比或 vw、vh 单位来定义文字的位置和大小。
具体步骤
立即学习“前端免费学习笔记（深入）”；
- HTML 结构：
首先，我们需要一个包含图片和文字的容器。这个容器将作为定位的参考系。
@@##@@Dynamic text!
- CSS 样式：
- 容器样式： 将容器设置为 position: relative，以便其内部的绝对定位元素可以相对于它进行定位。
.mockup-container {
position: relative;
width: 100%; /* 或者其他合适的宽度 */
}
.mockup-container img {
width: 100%; /* 图片宽度自适应容器 */
display: block; /* 移除图片下方可能存在的空白 */
}- 文字样式： 使用 position: absolute 将文字元素从文档流中移除，并使用 top、left 和 transform 属性进行定位。 为了使文字居中，我们将使用 transform: translate(-50%, -50%)。
.dynamic-text {
position: absolute;
top: 21%; /* 调整文字垂直位置，根据图片具体情况调整 */
left: 40%; /* 调整文字水平位置，根据图片具体情况调整 */
transform: translate(-50%, -50%); /* 水平垂直居中 */
z-index: 100; /* 确保文字在图片上方 */
color: black;
font-size: 2vw; /* 使用vw单位，文字大小随屏幕宽度自适应 */
font-weight: bold;
white-space: nowrap; /* 防止文字换行 */
}代码示例
Responsive Text on Mockup
@@##@@
Dynamic text!
注意事项
- 调整 top 和 left 值： top 和 left 属性的值需要根据实际图片和目标位置进行调整。 可以使用开发者工具来辅助调整，直到文字完美地居中于搜索框。
- 使用合适的单位： vw (viewport width) 单位是相对于视口宽度的百分比。 使用 vw 可以确保文字大小随着屏幕宽度变化而自适应缩放。 也可以使用 vh (viewport height) 单位，或百分比，根据具体情况选择。
- 处理文字溢出： 如果文字内容过长，可能会超出搜索框的范围。 可以使用 text-overflow: ellipsis 和 overflow: hidden 属性来处理溢出，或者限制文字的长度。
- 响应式断点： 在不同的屏幕尺寸下，可能需要调整文字的大小和位置。 可以使用媒体查询（@media）来针对不同的断点设置不同的样式。
总结
通过结合 position: absolute、transform 和响应式单位，我们可以实现将文字精准地定位在响应式 mockup 图片上的目标位置，并确保文字能够随着图片大小的改变进行自适应缩放。 这种方法可以应用于各种场景，例如在产品展示图片上添加动态标签，或在网页设计稿上添加说明文字。 关键在于找到合适的定位基准，并根据实际情况调整 CSS 属性。
