Question

很抱歉，如果这很难理解，但解释起来也很棘手。

我有一个这个CSS的div：

    .gallery{
        position:fixed;
        top:0;
        bottom:0;
        left:0;
        right:0;
            background-image:url(image.jpg);
            background-size:cover;
    }

...因此图像始终覆盖所有尺寸的视口。

我想在这上面加一些文字，保持相对于图像的相对位置（只是相对位置，大小保持不变，只是几个字）

我可以将图像放入div中，然后使用百分比顶部填充来模拟图像的纵横比。但是一旦图像开始被裁剪（因为它使用背景 - 封面），宽高比不再与原始图像相同，所以一段时间后文本开始覆盖它不应该覆盖的部分图像。

一个解决方案似乎是使用宽高比媒体查询，只是随着方面的变化调整百分比，但它很繁琐，感觉不对。

任何想法或这是不可能的？我知道图像的尺寸所以也许我可以使用该信息来模拟文本div上的背景 -

Answer 1

答案可能是将SVG用于您的文本。如果我正确理解你的问题，你希望文本与图像一起缩放（实际上只是带图像背景的div）。

普通HTML文本无法缩放。但SVG文本会。

<text style="font-weight: bold;">This is text in Scalable Vector Graphic (SVG)</text>

希望这会有所帮助。

使用背景大小的封面准确地将文本放在图像上

1 个答案: