html+css如何在圖片上添加文字

06-10

效果如圖

思路:div相對定位. 圖片默認定位, 文字絕對定位

參考代碼

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><styletype="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><divid="div1"><spanid="span1">愜意的海岸,旖旎的風景</span><imgsrc="img/hbfj.jpg"id="img1"/></div></body></html>


其他相關的說明：

你給一個div 添加背景圖，不影響在這個div裡面添加文字的，比如<style> .class{width: 200px;height: 200px;background: url("圖片路徑") no-repeat;}</style>注釋：background: url("圖片路徑") no-repeat;repeat: 平鋪整個頁面,左右與上下repeat-x: 在x軸上平鋪,左右repeat-y: 在y軸上平鋪,上下no-repeat: 圖片不重複<div class="class"> <p>你的文字內容</p></div>那麼在這個div的背景圖片就有了，你在裡面寫文字就可以了，如果你想給文字放到特定位置的話就需要定位了實際聯繫：代碼：<!doctype html><html><head><meta charset="utf-8"><title>無標題文檔</title><style> .class{width: 600px;height: 600px;background: url("http://img1.91.com/uploads/allimg/131011/645-131011115G5.jpg") no-repeat;} </style></head><div class="class"> <p>你的文字內容</p></div><body></body></html>效果：

現在不清楚的是，如何規範文字的位置以及大小以及字體，顏色。代碼講解：<!doctype html><html><head><meta charset="utf-8"><title>無標題文檔</title><style> ./這個「.」不可以掉，掉了，圖片就不顯示了。/class{width: 600px;height: 600px/寬和高是定義後面的圖片的尺寸的，如果真實的圖片比這個參數的數值大，那麼就會有圖片的部分被裁掉。/;background: url("http://img1.91.com/uploads/allimg/131011/645-131011115G5.jpg /圖片的地址/") no-repeat;} </style></head><div class="class"> <p>你的文字內容</p></div><body></body></html>第三種理解：有部分的理解但不是很理解：用CSS往圖片上嵌入文字有二種方法，分別如下：

　　第一種方法、添加一個DIV，採用絕對定位，圖片所屬DIV為基準。

　　參考代碼如下：

<divstyle="position:relative;width:100px;height:100px;"><imgsrc=""alt=""/><divstyle="position:absolute;width:100px;height:100px;z-indent:2;left:0;top:0;">文字</div></div>

　　第二種方法、圖片作為背景圖片。

　　參考代碼如下：

<divstyle="background:url(abc.jpg)no-repeatlefttop;">wenzi</div>
推薦閱讀：

※實拍貓咪圖片趣話說貓叼魚馴虎留絕招
※老夫少妻很幸福 {夫妻圖片}
※時尚花紋圖案牆貼牆紙圖片欣賞
※明星美女孟茜圖片
※如何尋龍點穴布衣派圖片

TAG:圖片 | 文字 |