如何在html中图片上加入字

HTML 中，有多种方法可以在图片上加入文字，以下是几种常见的实现方式及其详细步骤：

使用 <div> 和 CSS 定位

这是最常见且灵活的方法之一,通过将图片和文字放在同一个容器中，利用 CSS 定位来使文字覆盖在图片上。

HTML 结构

<div class="image-container">
    <img src="your-image.jpg" alt="描述图片">
    <div class="text-on-image">文字内容</div>
</div>

CSS 样式

.image-container {
    position: relative; / 设置为相对定位，为内部绝对定位元素提供参考 /
    width: [图片宽度]; / 根据实际需求设置图片宽度 /
}
.image-container img {
    width: 100%; / 使图片适应容器宽度 /
    display: block; / 去除图片下方的空白间隙 /
}
.text-on-image {
    position: absolute; / 绝对定位，相对于父容器定位 /
    top: [距离顶部的距离]; / 调整文字在图片上的垂直位置 /
    left: [距离左边的距离]; / 调整文字在图片上的水平位置 /
    font-size: [字体大小];
    color: [文字颜色];
    font-family: [字体类型];
    / 可以添加更多样式，如文字阴影、边框等 /
}

要让文字居中显示在图片上,可以这样设置 CSS：

.text-on-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); / 实现文字水平和垂直居中 /
    font-size: 24px;
    color: white;
    font-family: Arial, sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); / 添加文字阴影，增强可读性 /
}

使用 <figcaption>

<figcaption> 标签用于为 <figure> 元素中的图像、图表、插图等提供标题或说明，默认情况下会显示在图片下方，但可以通过 CSS 调整其位置使其显示在图片上。

HTML 结构

<figure>
    <img src="your-image.jpg" alt="描述图片">
    <figcaption class="caption-on-image">文字内容</figcaption>
</figure>

CSS 样式

figure {
    position: relative;
    width: [图片宽度];
}
figure img {
    width: 100%;
    display: block;
}
.caption-on-image {
    position: absolute;
    bottom: [距离底部的距离]; / 调整文字在图片上的垂直位置，负值可使文字在图片上方 /
    left: [距离左边的距离];
    font-size: [字体大小];
    color: [文字颜色];
    font-family: [字体类型];
    / 其他样式设置同上 /
}

要让文字显示在图片的上方居中位置,可以这样设置：

.caption-on-image {
    position: absolute;
    top: 20px; / 距离图片顶部 20 像素 /
    left: 50%;
    transform: translateX(-50%); / 水平居中 /
    font-size: 20px;
    color: yellow;
    font-family: 'Courier New', Courier, monospace;
}

使用背景图片和内联样式

将图片设置为元素的背景,然后通过内联样式或 CSS 来添加文字。

HTML 结构

<div class="background-image">
    <span class="text-on-background">文字内容</span>
</div>

CSS 样式

.background-image {
    position: relative;
    width: [图片宽度];
    height: [图片高度]; / 需要明确设置高度，以保证背景图片正常显示 /
    background-image: url('your-image.jpg');
    background-size: cover; / 使背景图片覆盖整个容器 /
    background-position: center; / 背景图片居中显示 /
}
.text-on-background {
    position: absolute;
    top: [距离顶部的距离];
    left: [距离左边的距离];
    font-size: [字体大小];
    color: [文字颜色];
    font-family: [字体类型];
    / 其他样式设置同上 /
}

设置一个宽高为 400px 的容器，文字在中间：

.background-image {
    position: relative;
    width: 400px;
    height: 400px;
    background-image: url('your-image.jpg');
    background-size: cover;
    background-position: center;
}
.text-on-background {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    color: red;
    font-family: 'Times New Roman', Times, serif;
}

使用表格布局（不推荐，仅作了解）

虽然可以使用表格来实现文字在图片上的布局,但这种方式不符合现代网页设计的最佳实践，因为它会使 HTML 结构变得复杂且难以维护，而且在移动端响应式设计方面表现不佳，为了完整性，这里简单介绍一下。

HTML 结构

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td><img src="your-image.jpg" alt="描述图片"></td>
    </tr>
    <tr>
        <td style="text-align: center;">文字内容</td>
    </tr>
</table>

这种写法会让文字显示在图片下方,如果想让文字覆盖在图片上，可以通过 CSS 调整第二个 <td> 的位置，但这样会增加代码的复杂性和冗余性，一般不建议使用表格来实现这种效果。

FAQs

问题 1：如何在图片上添加的文字在不同屏幕尺寸下都能良好显示？
答：要实现响应式的文字在图片上的显示，可以使用相对单位（如百分比、em、rem 等）来设置文字的大小和位置，并结合媒体查询（@media）来根据不同的屏幕尺寸调整样式，在小屏幕设备上，可以适当减小文字大小或改变文字的位置，以确保在各种设备上都能有良好的视觉效果，要注意图片的响应式处理，确保图片能自适应不同屏幕宽度。

问题 2：如何让文字在图片上具有半透明效果？
答：可以通过 CSS 的 opacity 属性或 rgba() 颜色值来设置文字的半透明效果，使用 opacity 属性：

.text-on-image {
    opacity: 0.7; / 设置透明度为 70%，可根据需要调整 /
}

或者使用 rgba() 颜色值：

.text-on-image {
    color: rgba(255, 255, 255, 0.8); / 白色文字，透明度为 80% /
}

原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/66578.html