返回顶部

<img src = "..."/>的一个图片上面怎么在放上字

转自：https://zhidao.baidu.com/question/1495805873400412779.html

例子1：

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

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

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

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

 

例子2：

文字在图片上方的 效果图

参考代码

<!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>

 

posted @ 2019-11-05 13:54  fen斗  阅读(6215)  评论(0)    收藏  举报