如何在图像顶部创建响应文本？ [英] How to create responsive text on top of an image?

问题描述

我真的不知道如何以任何其他方式提出这个问题，但我试图加载文本在图像顶部 - 这似乎是一个棘手的任务本身，但我有它正在使用此教程。不幸的是，教程稍微过时，我不能找出一种方法来动态改变字体大小和跨度大小的移动，仍然保持文本在图像的顶部正确的地方。

I'm really not sure how to pose this question any other way, but I'm trying to load text on top of an image - which appears to be a tricky task in itself, but I've got it going using this tutorial. Unfortunately, the tutorial is slightly out of date and I can't figure out a way to dynamically change both the font size and the span size for mobile and still maintain the text in the correct place on top of the image.

当窗口调整大小时，文本和框不会正确调整大小（它溢出图像）。

When the window is resized the text and the box doesn't resize properly (it overflows outside of the image).

我已经尝试了百分比大小以及其他技术，运气不大。

I've tried percentage sizing as well as other techniques with little luck. The CSS I'm using to display the text over the image with a background can be seen below.

在图片上叠加文字的最佳做法是什么？让它响应？这是我现在想使用的桌面浏览器：

What's the best practice for overlaying text on an image and how would one go about making it responsive? This is what I'm trying to use for desktop browsers right now:

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

有没有人对如何正确处理这些天有一些建议？

Does anyone have some advice on how to handle this properly these days? The article I mention above is from 2009 and I suspect it's not the best way to overlay text.

推荐答案

以下是我所做的更改将会：

Here are the changes I would make:

• 使用放置 span / code>而不是 top ，因此您在图片的跨度和底部之间始终有特定的边距。


• 使用基于百分比的 line-height ，以使其与 font-size


• 在span的右侧添加一些填充，因此文本不会在span的边缘向上突出

• Position the span using bottom rather than top, so you always have a specific margin between the span and the bottom of the image.
• Use a percentage-based line-height so that it will change proportionally to the font-size
• Add some padding to the right of the span, so the text doesn't bump right up on the edge of the span

更新的CSS：

.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);
}

这篇关于如何在图像顶部创建响应文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！