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

最新推荐文章于 2023-08-29 15:57:26 发布

逍遥小丸子

最新推荐文章于 2023-08-29 15:57:26 发布

阅读量2w

点赞数 8

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

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

版权

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

43 篇文章 148 订阅 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

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

摘要由CSDN通过智能技术生成

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

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

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

实现代码：

<!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方法&l