img图片上叠加文字内容

最新推荐文章于 2024-09-10 09:10:28 发布

黄献新

最新推荐文章于 2024-09-10 09:10:28 发布

阅读量712

点赞数 2

文章标签： html 前端框架前端

本文链接：https://blog.csdn.net/wuxianjinbu/article/details/139775208

版权

html中可以用css相对定位让文字在图片的上面。

1、新建html文档，在body标签中添加一个div标签，然后在div标签中添加img标签和p标签，这时文字和图片是分开的：

<div>
 <img src="9.png” alt="图片">
 <p>文字内容</p>
</div>

2、分别为div标签和p标签添加“position: relative;”和“position: absolute;”，这时p标签和div标签就形成了相对关系：

div {
position: relative;}
p{
position: absolute;}

3、为p标签设置“top”和“left”属性，属性值为距离顶部和左侧的长度，这时文字就会显示在图片的上面：

div {
position: relative;}
p{
top：30px；
left:60px;
position: absolute;}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*div1下面 包含着1个图片和1段文字*/
            #div1{
                position: relative;/*相对定位*/
                width: 267px;
                height: 140px;
            }
            /*图片部分的设置*/
            #img1{
                /*position: static;默认定位,可以省略*/
                width: 100%;
                height: 100%;
            }
            /*文字的设置*/
            #span1{
                position: absolute;/*绝对定位*/
                width: 100%;
                bottom: 0px;/*离底下0像素*/
                left: 0px;/*离左边0像素*/
                text-align: center;
                font-size: 18px;
                color: white;
            }  
        </style>
    </head>
    <body>
        <div id="div1">
            <span id="span1">惬意的海岸,旖旎的风景</span>
            <img src="img/hbfj.jpg"  id="img1" />
        </div>
    </body>
</html>