查看: 5080|回復: 0

[DIV+CSS 教程筆記02] 第十一課 div css當中的背景圖片的定位概念

[復制鏈接]

asp老師

226 主題	12 回帖	3260 積分

終身VIP會員

Rank: 7 Rank: 7 Rank: 7

積分: 3260

發(fā)消息

電梯直達

樓主

發(fā)表于 2014-11-30 22:10:41 | 只看該作者 |只看大圖回帖獎勵

|倒序瀏覽 |閱讀模式

親注冊登錄道勤網(wǎng)-可以查看更多帖子內(nèi)容哦�。ò蕡D片、文字詳情等）請您及時注冊登錄-bmrsportswear.com

您需要登錄才可以下載或查看，沒有賬號？立即注冊

本帖最后由 asp老師于 2014-11-30 23:07 編輯

好此時我們新建一個11.html的文件和11.css的文件，之后分別寫入以下的代碼
11.html源代碼如下;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<link href="11.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="700px" border="1px" >
<tr>
<td class="aaa" height="610px"> </td>
</tr>
</table>
</body>
</html>

復制代碼

11.css代碼如下：

.aaa{background:url(xml.jpg) no-repeat;}

復制代碼

我們分析這個css 表示的是把類為aaa的背景為xml.jpg這張圖片。并且這張圖片的方式是不重復的，當然圖片的方式還有 repeat-x repeat-y repeat 等
如果我們在后面繼續(xù)寫：

.aaa{background:url(xml.jpg) no-repeat; background-position:bottom;}

復制代碼

那么我們可以看到此時多加了一個 background-positon:bottom; 那么此時我們的這張圖片就定位到底部了，那么還有其他的定義方式為;
background-positon:right; background-positon:left; background-positon:top;

那么這幾個分別表示讓圖片向右，向左。和向上的不同表現(xiàn)方式。但是這個效果還是絕對的定位；如果讓他不絕對的定位呢？
好，我們來看這個代碼;

.aaa{background:url(xml.jpg) no-repeat; background-position:100px 50px;}

復制代碼

background-positon:50px 25px; 這個表示的是圖片向右面移動100px之后呢在向下移動50px,效果如下：

這個是按照先右面后下面在左面在上面的來移動的，如果是四個數(shù)值就是移動4步，不過我們一般定義2個數(shù)值（也就是右面和下面就可以了。）

點擊查看其他div+css教程
第一節(jié) div css基本書寫規(guī)則和原理詳細解答
第二節(jié)在div css當中并列標簽的應(yīng)用規(guī)則詳解
第三節(jié) div+ css中文字和圖片背景的常用css熟悉詳解
第四節(jié)div+css當中的內(nèi)聯(lián)樣式和外聯(lián)的區(qū)別講解
第五節(jié)div+css當中 class類別選擇符的應(yīng)用詳解
第六課. DIV +CSS當中的 id選擇器的應(yīng)用和匹配原理詳解
第七課 div css當中組合選擇符的應(yīng)用和原理詳解
第八課 div css 通配選擇符和包含選擇器的用法技巧
第九課 div css里面常用選擇器的課程總結(jié)
第十課 div css 中css偽類元素的講解和應(yīng)用原理詳解
第十一課 div css當中的背景圖片的定位概念

道勤主機提供365天*24小時全年全天無休、實時在線、零等待的售后技術(shù)支持。竭力為您免費處理您在使用道勤主機過程中所遇到的一切問題! 如果您是道勤主機用戶，那么您可以通過QQ【792472177】、售后QQ【59133755】、旺旺【詮釋意念】、微信：q792472177免費電話、后臺提交工單這些方式聯(lián)系道勤主機客服！如果您不是我們的客戶也沒問題，點擊頁面最右邊的企業(yè)QQ在線咨詢圖標聯(lián)系我們并購買后，我們?yōu)槟赓M進行無縫搬家服務(wù)，讓您享受網(wǎng)站零訪問延遲的遷移到道勤主機的服務(wù)！

本內(nèi)容系道勤團隊 bmrsportswear.com 客服與技術(shù)人員研究整理的智慧結(jié)晶，轉(zhuǎn)載勿用于商業(yè)用途，并保留本文鏈接，侵權(quán)必究！