的一個圖片上面怎麼在放上字

時間 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>

相關標籤/搜索