[分享]css中怎么在图片上加文字排版

发布于 2024-11-11 19:09:32

在网页设计中，图片经常被用作布局的一部分，但是如果需要在图片上添加文字，该怎么办呢？这篇文章将向您展示如何使用CSS在图片上添加文字。添加文字到图片需要指定一个容器，将图片放在该容器中，并使用CSS添...

在网页设计中，图片经常被用作布局的一部分，但是如果需要在图片上添加文字，该怎么办呢？这篇文章将向您展示如何使用CSS在图片上添加文字。
添加文字到图片需要指定一个容器，将图片放在该容器中，并使用CSS添加样式以使文本居中对齐。
以下是将文本添加到图片的示例代码：

<!DOCTYPE html>
<html>
<head>
	<title>在图片上添加文本</title>
	<style>
		.text-on-image {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
		}
		.text-on-image img {
			display: block;
			max-width: 100%;
			height: auto;
		}
		.text-on-image .text {
			position: absolute;
			text-align: center;
			font-size: 2rem;
			font-weight: bold;
			color: white;
			text-shadow: 2px 2px 4px #000000;
		}
	</style>
</head>
<body>
	<div class="text-on-image">
		<img src="https://via.placeholder.com/500x300" alt="placeholder image">
		<div class="text">在图片上添加文本</div>
	</div>
</body>
</html>

以上代码显示了一个包含图片和文本的容器。该容器使用flexbox布局，以垂直和水平方向居中对齐文本。在该容器的底部，图片使用最大宽度和自适应高度来缩放。文本使用绝对定位，并使用CSS属性设置文本样式，如字体大小、字重和阴影颜色等。
总之，使用CSS在图片上添加文本可以带来更吸引人和个性化的视觉效果，可提升网页设计的吸引力和用户体验。

css 教程

一个月内的热帖推荐

91云脑

Lv.1普通用户

62849 帖子	14 小组	291 积分

62849

帖子

小组

291

积分

关注作者

发帖	回复	分享

赞助商广告

本组热帖