CSS 中的图片文字叠加

2025年1月31日 | 阅读 6 分钟

容器中的文本或数据有助于使用 CSS 在图像上显示信息。CSS 对页面上的图像和信息进行样式设置和调整。我们可以通过多种方式使用图像来显示和包含文本。在这里，我们可以使用两种方法使用 CSS 在图像上显示文本。

使用 CSS 为图像和文本标签设置样式。
在容器上添加背景图像。

使用 CSS 为图像和文本标签设置样式

图像和文本标签放置在 HTML 元素上。CSS 属性用于根据用户要求显示图像。文本标签可以使用 CSS 样式标签进行调整，例如位置、内边距、外边距等。

语法

以下语法显示了文本和图像容器的样式属性。

<style>
.text-block {
  position: absolute|relative;
  bottom: 0%|0px;
  right: 0%|0px;
  color: color_value;
  padding: 0%|0px;
  }
</style>

描述

可以使用绝对或相对值设置位置。
带有文本容器所需值的 bottom、right、top 和 left 属性。
使用所需的 10% 或 100px 等值设置 0%|0px。
我们可以根据需要设置文本颜色，但这是可选的。
可以使用 padding-left、right、top 或 bottom，并以像素或百分比值为单位设置内边距。

示例

以下示例显示了带有文本或数据的不同图像尺寸。我们可以使用 CSS 属性和 HTML 元素进行设计。

示例 1

以下示例显示了带有必要元素的图像上的文本。我们可以设置图像上的信息。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Text On Image Using CSS </title>
<style>
.container {
position: relative;
font-family: Arial;
width: 430px;
height: 450px;
}
/*This CSS property styles the information on the image*/
.text-block {
position: absolute;
bottom: 65%;
right: 5%;
color: yellow;
padding-left: 10px;
padding-right: 10px;
}
body{
background-color:beige;
}
</style>
</head>
<body>
<h2> Text On Image Using CSS </h2>
<p> Display information on the image: </p>
<div class = "container">
<img src = "https://img.freepik.com/free-photo/cascade-boat-clean-china-natural-rural_1417-1356.jpg?w=1380&t=st=1698079554~exp=1698080154~hmac=c688a4b75fed79cebe2fe5b1dfba84f45095cdb5e444d347b40ea4d53eb9fd4f" alt="Nature" style="width:100%;">
<!-- Add a container with the CSS properties like padding and margin with the value. -->
<div class = "text-block">
<h4> Nature Image </h4>
<b> Waterfall with the green nature </b>
<p> We can set the image and information using CSS </p>
</div>
</div>
</body>
</html>

输出

输出在网页图像上显示文本。

示例 2

以下示例显示了带有必要元素的图像上的文本。我们可以创建一个数据块并在图像的右侧显示它。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Text On Image Using CSS </title>
<style>
/*This CSS property styles the relative position of the container*/
.container {
position: relative;
font-family: Arial;
width: 430px;
height: 450px;
}
/*This CSS property styles the information on the image*/
.text-block {
position: absolute;
bottom: 50%;
right: 5%;
background-color: lightgrey;
color: black;
padding-left: 10px;
padding-right: 10px;
width: 150px;
}
body{
background-color:beige;
}
</style>
</head>
<body>
<h2> Text On Image Using CSS </h2>
<p> Display information on the image: </p>
<div class = "container">
<img src = "https://img.freepik.com/free-photo/cascade-boat-clean-china-natural-rural_1417-1356.jpg?w=1380&t=st=1698079554~exp=1698080154~hmac=c688a4b75fed79cebe2fe5b1dfba84f45095cdb5e444d347b40ea4d53eb9fd4f" alt="Nature" style="width:100%;">
<!-- Add CSS properties like padding and margin with the value. -->
<div class = "text-block">
<h4> Nature Image </h4>
<b> Waterfall with the green nature </b>
<p> We can set the image and information using CSS </p>
</div>
</div>
</body>
</html>

输出

输出在网页图像上显示文本。

示例 3

以下示例显示了带有必要元素的图像上的文本。我们可以将信息设置在图像的不同位置。我们可以创建两个数据块并在图像的左侧和右侧显示它们。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Text On Image Using CSS </title>
<style>
body{
background-color:beige;
}
/*This CSS property styles the relative position of the container*/
.container {
position: absolute;
font-family: Arial;
width: 430px;
height: 450px;
}
/*This CSS property styles the information on the image*/
.text-block {
position: absolute;
bottom: 55%;
right: 5%;
background-color: lightgrey;
color: black;
padding-left: 10px;
padding-right: 10px;
width: 150px;
}
/*  Add a child element of the text container with different CSS properties */
.text-block p {
position: absolute;
bottom: 55%;
right: 130%;
color: yellow;
padding-left: 10px;
padding-right: 10px;
width: 150px;
}
</style>
</head>
<body>
<h2> Text On Image Using CSS </h2>
<p> Display information on the image: </p>
<div class = "container">
<img src = "https://img.freepik.com/free-photo/cascade-boat-clean-china-natural-rural_1417-1356.jpg?w=1380&t=st=1698079554~exp=1698080154~hmac=c688a4b75fed79cebe2fe5b1dfba84f45095cdb5e444d347b40ea4d53eb9fd4f" alt="Nature" style="width:100%;">
<!-- Add a container with the CSS properties like padding and margin with the value. -->
<div class = "text-block">
<h4> Nature Image </h4>
<b> Waterfall with the green nature </b>
<p> We can set the image and information using CSS </p>
</div>
</div>
</body>
</html>

输出

输出在网页图像上显示文本。

在容器上添加背景图像

背景图像设置在所需的容器上，文本标签放置在 HTML 元素上。CSS 属性用于根据用户要求显示图像及其尺寸。文本标签可以使用 CSS 样式属性进行调整，例如内边距、外边距、宽度和其他可选属性。

语法

以下语法显示了文本和图像容器的样式属性。

<style>
.container {
  position: absolute;
  background-image: url("image_path/image_name.extension");
}
.text-block {
  position: absolute|relative;
  bottom: 0%|0px;
  right: 0%|0px;
  color: color_value;
  padding: 0%|0px;
  }
</style>

描述

可以使用背景图像的绝对值来设置位置，或者文本标签可以是绝对的或相对的。
图像的高度和宽度是可选的，但可以增强容器的样式。
带有显示文本所需值的 bottom、right、top 和 left 属性。
使用所需的 10% 或 100px 等值设置 0%|0px。
我们可以根据需要为文本标签设置颜色或背景颜色，但这只是可选的。
可以使用像素或百分比值设置内边距。

示例

以下示例显示了带有文本或数据的不同图像尺寸。我们可以使用 CSS 属性和 HTML 元素进行设计。

示例 1

以下示例显示了带有基本信息的图像上的文本。我们可以将图像设置为背景并在图像上显示数据。我们可以设置信息容器的内边距和外边距。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Text On Image Using CSS </title>
<style>
body{
background-color:beige;
}
/*This CSS property styles the relative position of the container*/
.container {
position: absolute;
font-family: Arial;
width: 430px;
height: 350px;
background-image: url("https://img.freepik.com/free-photo/cascade-boat-clean-china-natural-rural_1417-1356.jpg?w=1380&t=st=1698079554~exp=1698080154~hmac=c688a4b75fed79cebe2fe5b1dfba84f45095cdb5e444d347b40ea4d53eb9fd4f");
}
/*This CSS property styles the information on the image*/
.text-block {
position: absolute;
bottom: 55%;
right: 15%;
background-color: lightgrey;
color: black;
padding-left: 10px;
padding-right: 10px;
width: 250px;
}

</style>
</head>
<body>
<h2> Text On Image Using CSS </h2>
<p> Display information on the image: </p>
<!-- Add an image on the container as a background image -->
<div class = "container">
<div class = "text-block">
<h4> Nature Image </h4>
<b> Waterfall with the green nature </b>
<p> We can set the image and information using CSS </p>
</div>
</div>
</body>
</html>

输出

输出在网页图像上显示文本。

示例 2

以下示例显示了图像上的主要文本和块级文本。我们可以将图像设置为所有 HTML 标签的背景，并在图像上显示数据。我们可以设置图像和信息容器的宽度、高度和内边距。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Text On Image Using CSS </title>
<style>
body{
background-color:beige;
}
/*This CSS property styles the relative position of the container*/
.container {
position: absolute;
font-family: Arial;
width: 430px;
height: 350px;
background-image: url("https://img.freepik.com/free-photo/cascade-boat-clean-china-natural-rural_1417-1356.jpg?w=1380&t=st=1698079554~exp=1698080154~hmac=c688a4b75fed79cebe2fe5b1dfba84f45095cdb5e444d347b40ea4d53eb9fd4f");
}
/*This CSS property styles the information on the image*/
.text-block {
position: absolute;
bottom: 25%;
right: 15%;
background: rgba(176, 75, 76, 0.3);
color: yellow;
padding-left: 10px;
padding-right: 10px;
width: 250px;
}
</style>
</head>
<body>
<!-- Add an image on the container as a background image -->
<div class = "container">
<h2> Text On Image Using CSS </h2>
<p> Display information on the image: </p>
<div class = "text-block">
<h4> Nature Image </h4>
<b> Waterfall with the green nature </b>
<p> We can set the image and information using CSS </p>
</div>
</div>
</body>
</html>

输出

输出在网页图像上显示文本。

结论

可以使用元素的值、文本和标题来设置图像。我们可以使用不同的 CSS 属性在图像上获取文本。图像上的文本有助于用户轻松理解联系信息。

下一个主题Css-border-bottom

CSS 中的图片文字叠加

使用 CSS 为图像和文本标签设置样式

语法

描述

示例

在容器上添加背景图像

语法

描述

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS 中的图片文字叠加

使用 CSS 为图像和文本标签设置样式

语法

描述

示例

在容器上添加背景图像

语法

描述

示例

结论

相关帖子

Link Style CSS

CSS Not Selector

Cursive Font in CSS

Removing Underline from the Link in CSS

CSS Float Left

Conditional Formatting in CSS

Dotted Border CSS

CSS Media Types

Margin vs Padding

Conditional CSS React Material UI

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器