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

问题描述

我真的不知道如何以其他方式提出这个问题，但我正在尝试在图像上加载文本 - 这似乎是一个棘手的任务本身，但我已经使用此教程。不幸的是，该教程稍微过时，我无法找出一种动态更改移动设备的字体大小和跨度大小的方法，并仍将文本保留在图像顶部的正确位置。

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

我尝试过百分比大小以及其他技术，没有什么运气。我正在使用CSS来显示具有背景图像的文字，可以在下面看到。

在图像上叠加文字的最佳做法是什么？要做好回应吗？这就是我现在用于桌面浏览器的目的：

  .herotext span {
 position：absolute ; 
顶部：80％; 
 font-family：'museo_slab500'; 
 font-size：150％; 
 color：#fff; 
 padding-left：20px; 
 width：40％; 
行高：35px; 
 background：rgb（0，0，0）; 
 background：rgba（0，0，0，0.7）; 
} 
  

有没有人对如何处理这些日子有一些建议？我上面提到的这篇文章是从2009年开始的，我怀疑它不是覆盖文本的最好方法。

解决方案

将会：

• 使用底部的 span / code>而不是顶部，所以您始终在图片的跨度和底部之间有一定的边距。


• 使用基于百分比的 line-height ，以便它将按比例更改为 font-size


• 在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）; 
} 
  

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:

• 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

Updated 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屋！