HTML+CSS项目实践六：HTML中设置文字浮在图片上方的两种方法（背景图片法、DIV+CSS定位法）

最新推荐文章于 2024-07-01 18:40:50 发布

逍遥小丸子

最新推荐文章于 2024-07-01 18:40:50 发布

阅读量2.1w

点赞数 8

CC 4.0 BY-SA版权

分类专栏： HTML+CSS网页设计

本文链接：https://blog.csdn.net/dnruanjian/article/details/85290921

HTML+CSS网页设计专栏收录该内容

43 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了两种将文字悬浮在图片上方的HTML+CSS方法：一是设置背景图片，二是利用div+css定位。背景图片法简单但受限于图片大小，而div+css定位法更灵活，通过调整z-index控制显示层次。此外，文章还提及了设置背景颜色透明度的两种方式，包括opacity和rgba，并提到了rgba在旧版IE浏览器的兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果：让文字悬浮在图片上方

方法一：给盒子添加一个背景图片，盒子里写文字即可。

制作思路：自带背景属性的盒子，那么盒子里面的文字自然显示在图片上方。

实现代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html中让文字显示在图片上方-div+css方法</title>
<style type="text/css">
#da{ 
	width:577px;/*设置盒子的宽高，可以根据作为背景的图片宽高来进行设置*/
	height:400