的一个图片上面怎么在放上字

时间 2019-11-09

标签一个图片上面怎么放上繁體版

原文原文链接

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

例子1：html

html中能够用css相对定位让文字在图片的上面。spa

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

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

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

例子2：blog

文字在图片上方的效果图图片

参考代码文档

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