将文字放在图片上(html，css) [英] Positioning text over image (html,css)

问题描述

所以，我有一个图像，我想在其中心显示一些文本.

So, I have an image and I want to display in the center of it some text.

代码:

.img {
    position: relative;
}

.img h3 {
    position: absolute;
    width: 100%
    top: 85px;
    text-align: center;
}

好的，所以我做到了.但这就是问题:当我调整浏览器的大小并且图像变小时，文本就从图像中消失了.

Ok, so I managed to do it. But here is the thing: when I resize my browser and the image becomes smaller, the text is going out of the image.

所以我的问题是，是否必须对所有不同维度使用 @media 规则?以及我如何知道要在CSS中使用哪些尺寸?

So my question is, do I have to use the @media rule for all the different dimensions? And how do I know which dimensions to use in my CSS?

或者也许我可以做些什么，以便我的文本元素始终停留在图像中?

Or is there maybe something I can do so my text element always stays inside the image?

谢谢.

推荐答案

您可以使用很多不同的选项，每个选项都有其优点和优点.缺点和浏览器支持方面的差异:

You have a bunch of different options you can make use of, each with its pros & cons and with a difference in browser support:

Flexbox是您拥有的最简单的选项，无需使用表或不必从文档流中删除元素，但是它不像其他可行选项那样得到广泛支持.我相信会很快.

Flexbox is the simplest option you have, without using tables or having to get your elements out of the document flow, but it's not as widely supported as other viable options. I trust it will be soon enough.

代码:

/* --- CSS --- */
.background {
    height: 10em;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
}

.background > h4 {
    color: #000;
    font-size: 2em;
    font-family: sans-serif;
}

<!--- HTML --->
<div class = "background" style = "background-image: url(https://images.freecreatives.com/wp-content/uploads/2015/05/HD-Vintage-Photography-Wallpaper.jpg);">
  <h4>Hello, world!</h4>
</div>

使用此选项时，必须确保:

When using this option, you have to ensure that:

• 标题的行高与容器的高度相等和
• 标题是单线的.

_(注释2)

代码:

/* --- CSS --- */
.background {
    height: 10em;
    text-align: center;
    background-size: cover;
    background-position: center;
}

.background > h4 {
    color: #000;
    font-size: 2em;
    margin: 0 auto;
    font-family: sans-serif;
    line-height: 5em; /* container height / 2 */
}

<!--- HTML --->
<div class = "background" style = "background-image: url(https://images.freecreatives.com/wp-content/uploads/2015/05/HD-Vintage-Photography-Wallpaper.jpg);">
  <h4>Hello, world!</h4>
</div>

这可能是整体上使用最广泛的方法，因为它得到了足够广泛的支持，但是它的缺点是会使元素(title)脱离常规流程.

This is probably the overall most used method as it is widely enough supported, but it has the disadvantage that gets the element (title) off the normal flow.

代码:

/* --- CSS --- */
.background {
    height: 10em;
    position: relative;
    background-size: cover;
    background-position: center;
}

.background > h4 {
    top: 50%;
    left: 50%;
    margin: 0;
    color: #000;
    font-size: 2em;
    position: absolute;
    font-family: sans-serif;
    transform: translate(-50%, -50%);
}

<!--- HTML --->
<div class = "background" style = "background-image: url(https://images.freecreatives.com/wp-content/uploads/2015/05/HD-Vintage-Photography-Wallpaper.jpg);">
  <h4>Hello, world!</h4>
</div>

好吧，如果有人发现了这个问题，我可能会被私刑，但是您可以使用 display:table 作为容器，并使用 display:table-cell ，以便标题可以利用表格的对齐方式.

Well, I will likely be lynched, if anybody finds this out, but you can use display: table for the container and display: table-cell for the title to take advantage of the aligning of tables.

您现在可以将标题居中

• 水平地，通过使用 text-align:center 和
垂直
• 使用 vertical-align:middle

代码:

/* --- CSS --- */
.background {
    width: 100%;
    height: 10em;
    display: table;
    background-size: cover;
    background-position: center;
}

.background > h4 {
    color: #000;
    font-size: 2em;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    font-family: sans-serif;
}

<!--- HTML --->
<div class = "background" style = "background-image: url(https://images.freecreatives.com/wp-content/uploads/2015/05/HD-Vintage-Photography-Wallpaper.jpg);">
  <h4>Hello, world!</h4>
</div>

1. 由于我们在图像中使用空的 div ，因此必须始终明确定义 height
2. 使用 line-height 将元素垂直居中需要 height 与父级的高度等于.在这种情况下，使用标题高度的 50％ ，因为标题的 font-size 是2x 父级的 font-size ，并且还以 ems 表示.
3. 关于您提到的 @media 查询，它不应用于诸如居中文本之类的简单内容，而应用于基于以下内容显示/隐藏元素屏幕尺寸等.
4. 如果您关心网站在较小屏幕上的可移植性，我的建议是避免使用 px (pixels)使用会根据屏幕更新的 ％ (百分比)或 em (ems)，方法是使用 @media 手动更新容器的 font-size >查询.

1. Since we are using an empty div for our image the height must be explicitly defined at all times.
2. Using line-height to center an element vertically requires that the line-height is equal to the height of the parent. In this case, 50% of the parent height is used, due to the fact that the font-size of the title is 2x the font-size of the parent and its also expressed in ems.
3. With regard to the @media query you made mention of, it should not be used for simple stuff like centering text, but rather for showing/hiding elements based on screen size etc.
4. If you care about the portability of your website to smaller screens, my advice is to avoid using px (pixels), but instead use % (percentages) that will update based on the screen or em (ems) by manually updating the font-size of the container using a @media query.

这篇关于将文字放在图片上(html，css)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！