将img设置成div的背景

顾北顾

于 2022-04-19 11:43:32 发布

阅读量894

点赞数

分类专栏：前端问题经验文章标签：经验分享

原文链接：https://blog.csdn.net/qiaoguoqing/article/details/66971111

版权

前端问题经验专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这篇博客展示了如何使用CSS实现元素的绝对定位，通过设置`z-index`属性将图片置于背景，同时在前景展示文字。示例中，一个包含图片的<div>元素与文字‘你好你好你好’实现了层叠效果，文字覆盖在图片之上。

摘要由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" />  
 <style>
   a1{
         position:relative;
   }
   a1  img{
         position:absolute;
         z-index:-1;
   }

</style>
</head>  
<body>  
     <div class="a1"> 
            <img src="hello.jpg"/> 
          <div>你好你好你好</div>
    </div>  
</body>  
</html>