效果如圖
思路:div相對定位. 圖片默認定位, 文字絕對定位
參考代碼
<!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>
其他相關(guān)的說明：
你給一個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>你的文字內(nèi)容</p>
</div>
那么在這個div的背景圖片就有了，你在里面寫文字就可以了，如果你想給文字放到特定位置的話就需要定位了
實際聯(lián)系：
代碼：
<!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>你的文字內(nèi)容</p>
</div>
<body>
</body>
</html>
效果：
現(xiàn)在 不清楚的是，
如何規(guī)范文字的位置以及大小以及字體，顏色。
代碼講解：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
./這個“.”不可以掉，掉了， 圖片就不顯示了。/
class{width: 600px;height: 600px/寬和高是定義后面的圖片的尺寸的，如果真實的圖片比這個參數(shù)的數(shù)值大，那么就會有圖片的部分被裁掉。/;
background: url("http://img1.91.com/uploads/allimg/131011/645-131011115G5.jpg /圖片的地址/") no-repeat;}
</style>
</head>
<div class="class">
<p>你的文字內(nèi)容</p>
</div>
<body>
</body>
</html>
第三種理解：
有部分的理解但不是很理解：
用CSS往圖片上嵌入文字有二種方法，分別如下：
第一種方法、添加一個DIV，采用絕對定位，圖片所屬DIV為基準。
參考代碼如下：
<div style="position:relative;width:100px;height:100px;"> <img src="" alt="" /> <div style="position:absolute;width:100px;height:100px;z-indent:2;left:0;top:0;"> 文字 </div></div> |
第二種方法、圖片作為背景圖片。
參考代碼如下：
<div style="background:url(abc.jpg) no-repeat left top;"> wenzi</div>