HTML如何在图片上添加文字

HTML如何在图片上添加文字

当我们开发一个页面,插入图片时,需要有一组文字对图片进行描述。那么HTML中如何在图片上添加文字呢?这篇文章告诉你。

先让我们来看下效果图:

HTML如何给图片加上文字

句子“这是一张夜空图片”被放置在了图片的左下角。

那么这个是如何设置的呢。

首先我们要设计一个 div,将图片的和文字放置在 div 里面,设置文字的样式。随后需要用到“定位”,将 div 设置为父级,为相对定位,​position:relative​;将h1设置为绝对定位,​position:absolute​。在调整合适的位置即可。源代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>W3Cschool</title><style>div{position: relative;}h1{font-size: 32px;color: white;position:absolute;top:250px;left:10px;}</style>
</head>
<body><div><img src="./image/night.png" alt=""><h1>这是一张夜空的图片</h1></div>
</body>
</html>

图片素材:

夜空图片

以上就是 HTML 中如何在图片上添加文字问题的全部解答。同学们可以自行保存素材进行练习巩固。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/41187.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Leetcode.342 4的幂

给定一个整数&#xff0c;写一个函数来判断它是否是 4 的幂次方。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 整数 n 是 4 的幂次方需满足&#xff1a;存在整数 x 使得 n 4x 示例 1&#xff1a; 输入&#xff1a;n 16 输出&#xff1a;true示…

微信小程序的智慧物流平台-计算机毕业设计源码49796

目 录 摘要 1 绪论 1.1 研究背景 1.2 研究意义 1.3研究方法 1.4开发技术 1.4.1 微信开发者工具 1.4.2 Node.JS框架 1.4.3 MySQL数据库 1.5论文结构与章节安排 2系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1 用户登录流程 2.2.2 数据删除流程 2.3 系统功能分…

ESP32CAM物联网教学09

ESP32CAM物联网教学09 摄像头配上显示屏 小智给摄像头配上了一块液晶显示屏,ESP32Cam变得更加酷炫了,应用也更加广泛了。 TFT彩色显示屏从第一课的CameraWebServer开始,我们一直都是利用浏览器来查看显示摄像头的视频流,都需要借助这个网页提供的服务。 可以让ESP32Cam开…

【案例干货】智能导览智慧景区系统小程序开发主要功能

智能景区/园区导览系统是一种利用云计算、物联网等新技术&#xff0c;通过互联网或移动互联网&#xff0c;借助便携的终端上网设备&#xff0c;为游客提供全方位、便捷化街区导航与信息服务的系统。 其主要功能可以归纳为以下几个方面&#xff1a; 1. 街区资讯展示 信息介绍&…

短链接学习day2

用户敏感信息脱敏展示&#xff1a; RequestParam 和 PathVariable的区别 注解是用于从request中接收请求的&#xff0c;两个都可以接收参数&#xff0c;关键点不同的是RequestParam 是从request里面拿取值&#xff0c;而 PathVariable 是从一个URI模板里面来填充。 PathVari…

昇思25天学习打卡营第12天|ResNet50迁移学习

昇思25天学习打卡营第12天|ResNet50迁移学习 前言ResNet50迁移学习数据准备下载数据集 加载数据集数据集可视化 训练模型构建Resnet50网络固定特征进行训练训练和评估可视化模型预测 个人任务打卡&#xff08;读者请忽略&#xff09;个人理解与总结 前言 非常感谢华为昇思大模型…

vite简介

vite是新一代前端构建工具&#xff0c;vite具有优势如下&#xff1a; 轻量快速的热重载&#xff08;HMR&#xff09;&#xff0c;能实现快速的服务启动。对TypeScript、JSX、CSS等支持开箱即用。真正的按需编译&#xff0c;不再等待整个应用编译完成。webpack构建与vite构建对…

Jenkins 强制杀job

有时候有的jenkins job运行时间太长&#xff0c;在jenkins界面点击x按钮进行abort&#xff0c;会失败&#xff1a; 这时候点击&#xff1a; “Click here to forcibly terminate running steps” 会进一步kill 任务&#xff0c;但是也还是有杀不掉的可能性。 终极武器是jenkin…

vue3【提效】使用 VueUse 高效开发(工具库 @vueuse/core + 新增的组件库 @vueuse/components)

Vueuse 是一个功能强大的 Vue.js 生态系统工具库&#xff0c;提供了可重用的组件和函数&#xff0c;帮助开发者更轻松地构建复杂的应用程序。 官网 &#xff1a;https://vueuse.org/core/useWindowScroll/ 安装 VueUse npm i vueuse/core vueuse/components&#xff08;可选&a…

llm学习-4(llm和langchain)

langchain说明文档&#xff1a;langchain 0.2.6 — &#x1f99c;&#x1f517; langChain 0.2.6https://api.python.langchain.com/en/latest/langchain_api_reference.html#module-langchain.chat_models 1&#xff1a;模型 &#xff08;1&#xff09;自定义模型导入&#x…

跟《经济学人》学英文:2024年07月06日这期 Amazon turns 30

As Amazon turns 30, three factors will define its next decade It will have to deal with trustbusters, catch up on AI and revive its core business 它将不得不应对反垄断者&#xff0c;追赶人工智能并重振其核心业务 trustbuster&#xff1a; 美 [ˈtrəs(t)ˌbəs…

你真的会ELISA加样吗?

在ELISA实验中&#xff0c;研究人员需要进行多次加样步骤完成实验操作。对于常规双抗体夹心法ELISA&#xff0c;一般有如下加样步聚&#xff0c;即加样本、加检测抗体、加酶结合物、加底物&#xff08;最后加终止液停止反应&#xff09;。 加样步骤基础知识 加样步骤中一般使用…

云仓酒庄北京公司2024年:深耕酒业生态,以专业筑基

云仓酒庄北京公司&#xff1a;深耕酒业生态&#xff0c;以专业筑基&#xff0c;共绘酒业新蓝图 在竞争日益激烈的酒类市场中&#xff0c;云仓酒庄北京公司以其稳健的步伐、专业底蕴以及对品质的不懈追求&#xff0c;正逐步成为行业内一股不可忽视的力量。这家公司不仅仅是一个…

把Windows打造成一个NTP网络时间服务器,为网关提供校时服务

把Windows打造成一个NTP网络时间服务器&#xff0c;为网关提供校时服务。主要目的是为了解决&#xff1a;当网关不能上外网的时候&#xff0c;可以使用局域网的电脑来当做NTP服务器&#xff0c;实现校时功能。 跟着小编来看&#xff0c;如何使用NTP网络时间服务器来同步时间。 …

ubuntu关于docker部署 项目一站式教程

**假设已有ubuntu服务器并且登录root账号 ** **FinalShell中复制快捷键是 ****Ctrl+Shift+V** 卸载老版本docker sudo apt-get remove docker docker-engine docker.io containerd runc安装docker步骤 更新软件包sudo apt update sudo apt upgrade安装docker依赖sudo apt-get …

分享 10个简单实用的 JS 代码技巧

代码图片生成工具&#xff1a;有码高清 一、滚动到页面顶部 我们可以使用 window.scrollTo() 平滑滚动到页面顶部。 源码&#xff1a; const scrollToTop () > {window.scrollTo({ top: 0, left: 0, behavior: "smooth" }); };二、滚动到页面底部 当然&…

探索大型语言模型自动评估 LLM 输出长句准确性的方法

LLM现在能够自动评估较长文本中的事实真实性 源码地址&#xff1a;https://github.com/google-deepmind/long-form-factuality 论文地址&#xff1a;https://arxiv.org/pdf/2403.18802.pdf 这篇论文是关于谷歌DeepMind的&#xff0c;提出了新的数据集、评估方法和衡量标准&am…

vue2+element-ui新增编辑表格+删除行

实现效果&#xff1a; 代码实现 &#xff1a; <el-table :data"dataForm.updateData"border:header-cell-style"{text-align:center}":cell-style"{text-align:center}"><el-table-column label"选项字段"align"center&…

Linux 内核 GPIO 用户空间接口

文章目录 Linux 内核 GPIO 接口旧版本方式&#xff1a;sysfs 接口新版本方式&#xff1a;chardev 接口 gpiod 库及其命令行gpiod 库的命令行gpiod 库函数的应用 GPIO&#xff08;General Purpose Input/Output&#xff0c;通用输入/输出接口&#xff09;&#xff0c;是微控制器…

哪里还可以申请免费一年期的SSL证书?

目前&#xff0c;要申请免费一年期的SSL证书&#xff0c;选项较为有限&#xff0c;因为多数供应商已转向提供短期的免费证书&#xff0c;通常有效期为90天。不过&#xff0c;有一个例外是JoySSL&#xff0c;它仍然提供一年期的免费SSL证书&#xff0c;但是只针对教育版和政务版…