網(wǎng)頁設(shè)計與制作教程Web前端開發(fā)（第7版）課件：CSS3的屬性-CSS背景屬性_第1頁
網(wǎng)頁設(shè)計與制作教程Web前端開發(fā)（第7版）課件：CSS3的屬性-CSS背景屬性_第2頁
網(wǎng)頁設(shè)計與制作教程Web前端開發(fā)（第7版）課件：CSS3的屬性-CSS背景屬性_第3頁
網(wǎng)頁設(shè)計與制作教程Web前端開發(fā)（第7版）課件：CSS3的屬性-CSS背景屬性_第4頁
網(wǎng)頁設(shè)計與制作教程Web前端開發(fā)（第7版）課件：CSS3的屬性-CSS背景屬性_第5頁
已閱讀5頁，還剩47頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

網(wǎng)頁背景是網(wǎng)頁設(shè)計的重要因素之一，不同類型的網(wǎng)站有不同的背景和基調(diào)。背景屬性在命名時，使用“backgroup-”前綴。

CSS3的屬性

CSS背景屬性目錄

CSS3的屬性5.1CSS背景屬性5.2CSS字體屬性5.3CSS文本屬性5.4CSS尺寸屬性5.5CSS列表屬性5.6CSS表格屬性5.7CSS內(nèi)容屬性5.8CSS屬性的應(yīng)用5.9實訓——制作社區(qū)網(wǎng)頁面習題55.1CSS背景屬性5.1.1背景顏色屬性background-color語法：background-color:color|transparentp{background-color:silver;}div{background-color:rgb(223,71,177);}body{background-color:#98AB6F;}pre{background-color:transparent;}5.1CSS背景屬性【例5-1】設(shè)置元素的背景顏色，本例文件5-1.html在瀏覽器中顯示的效果如圖5-1所示。5.1CSS背景屬性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>設(shè)置背景色</title><styletype="text/css">h1{/*標題1的背景色*/background-color:coral;}p{/*段落的背景色*/background-color:darkgrey;}table{/*表格的背景色*/background-color:yellow;}</style></head>5.1CSS背景屬性<bodystyle="background:gainsboro;"><!--設(shè)置整個網(wǎng)頁的背景色--><h1>設(shè)置背景色</h1><p>網(wǎng)頁背景是網(wǎng)頁設(shè)計的最要因素之一，不同類型的網(wǎng)站有不同的背景和基調(diào)。</p><tableborder="1"cellspacing=""cellpadding=""><tr><thstyle="background-color:red;">姓名</th><!--表格單元格的背景色--><th>性別</th></tr><trstyle="background-color:yellowgreen;"><!--設(shè)置表格的行的背景色--><td>張三</td><td>女</td></tr></table></body></html>5.1.2背景圖像屬性background-image語法：background-image:none|url(url),url(url),…|linear-gradient|radial-gradient|repeating-linear-gradient|repeating-radial-gradientbody{background-image:none;}div{background-image:url("images/backimg.jpg");}blockquote{background-image:url("backpic.jpg");}br{background-image:url(/ImageFile/aa.gif);}body{background-image:url(bg_flower.gif),url(bg_flower_2.gif);}div{background:url("bg1.jpg")00no-repeat,url("bg2.jpg")200px0no-repeat,url("gb3.jpg")400px200pxno-repeat;}5.1CSS背景屬性【例5-2】設(shè)置元素的背景圖像。本例文件5-2.html在瀏覽器中顯示的效果如圖5-2所示。5.1CSS背景屬性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>設(shè)置背景圖像</title><styletype="text/css">body{/*整個網(wǎng)頁的背景圖片*/background-image:url(images/sunshine.jpg);}p{/*段落的背景圖片和顏色*/background-color:darkgrey;background-image:url(images/flowers1.jpg);}table{/*表格的背景圖片*/background-image:url(images/rose2.jpg);width:400px;height:300px;}</style></head>5.1CSS背景屬性<body><p>網(wǎng)頁背景是網(wǎng)頁設(shè)計的最要因素之一，不同類型的網(wǎng)站有不同的背景和基調(diào)。CSS有非常豐富的背景屬性。CSS允許為任何元素添加純色背景，也允許使用圖像作為背景。</p><tableborder="1"cellspacing="20"cellpadding="30"><tr><thstyle="background-image:url(images/buttonblue.jpg);">姓名</th><!--表格的單元格的背景圖片--><th>性別</th></tr><trstyle="background-image:url(images/buttonaqua.jpg);"><!--設(shè)置表格的行的背景圖片--><td>張三</td><td>女</td></tr></table></body></html>5.1CSS背景屬性【例5-3】多背景圖像屬性示例。本例文件5-3.html在瀏覽器中顯示的效果，如圖5-3所示。<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>多背景圖像</title><styletype="text/css">

div{width:400px;height:300px;border:5pxdashed;float:left;margin:5px;background-image:url(images/apple.jpg),url(images/apple2.gif),url(images/apple3.jpg),url(images/apple4.jpg);background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;background-position:lefttop,righttop,rightbottom,leftbottom;background-size:120px120px;}</style></head>5.1CSS背景屬性<body><divid="">

內(nèi)容

</div></body></html>5.1CSS背景屬性5.1.3重復背景圖像屬性background-repeat語法：background-repeat:repeat|no-repeat|repeat-x|repeat-ytable{background:url("images/buttondvark.gif");background-repeat:repeat-y;}p{background:url("images/rose.gif");background-repeat:no-repeat;}5.1CSS背景屬性例5-4】設(shè)置重復背景圖像示例。本例文件5-4a.html、5-4b.html、5-4c.html、5-4d.html在瀏覽器中顯示的效果，如圖所示。5.1CSS背景屬性5.1CSS背景屬性背景圖像不重復的CSS定義代碼如下：body{background-color:beige;background-image:url(images/backpic.jpg);background-repeat:no-repeat;}背景圖像水平重復的CSS定義代碼如下：body{background-color:beige;background-image:url(images/backpic.jpg);background-repeat:repeat-x;}背景圖像垂直重復的CSS定義代碼如下：body{background-color:beige;background-image:url(images/backpic.jpg);background-repeat:repeat-y;}背景圖像重復的CSS定義代碼如下：body{background-color:beige;background-image:url(images/backpic.jpg);background-repeat:repeat;}5.1CSS背景屬性5-4a.html<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>設(shè)置背景圖片重復1</title><styletype="text/css">body{/*背景圖像不重復的CSS定義代碼*/background-color:beige;background-image:url(images/backpic.jpg);background-repeat:no-repeat;}</style></head><body></body></html>5.1CSS背景屬性5-4b.html<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>設(shè)置背景圖片重復1</title> <styletype="text/css"> body{ background-color:beige; background-image:url(images/backpic.jpg); background-repeat:repeat-x; } </style> </head> <body> </body></html>5.1CSS背景屬性5-4c.html<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>設(shè)置背景圖片重復1</title> <styletype="text/css"> body{ background-color:beige; background-image:url(images/backpic.jpg); background-repeat:repeat-y; } </style> </head> <body> </body></html>5.1CSS背景屬性5-4d.html<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>設(shè)置背景圖片重復1</title> <styletype="text/css"> body{ background-color:beige; background-image:url(images/backpic.jpg); background-repeat:repeat; } </style> </head> <body> </body></html>5.1CSS背景屬性5.1.4固定背景圖像屬性background-attachment語法：background-attachment:scroll|fixed示例：設(shè)置或檢索背景圖像是隨對象內(nèi)容滾動還是固定的。html{background-image:url("rose.jpg");background-attachment:fixed;}5.1.5背景圖像位置屬性background-position語法：background-position:positionposition|lengthlengthbody{background:url("images/backpic.jpg");background-position:topright;}div{background:url("images/back.gif");background-position:30%75%;}table{background:url("images/back.gif");background-position:35%2.5cm;}a{background:url("images/backpic.jpg");background-position:5.25in;}5.1CSS背景屬性【例5-5】設(shè)置背景圖像位置，本例文件5-5.html在瀏覽器中的顯示效果如圖5-5所示。5.1CSS背景屬性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>背景圖像位置屬性</title><styletype="text/css">div{background-image:url(images/lotus.jpg);/*背景圖片*/background-repeat:no-repeat;/*圖片不重復顯示*/width:800px;/*設(shè)置元素寬度*/height:250px;/*設(shè)置元素高度*/}</style></head>5.1CSS背景屬性<body><divstyle="background-position:centercenter;">當在網(wǎng)頁中插入背景圖像時，默認的位置都是網(wǎng)頁的左上角?？梢酝ㄟ^background-position屬性來改變圖像的插入位置。background-position設(shè)置背景圖像原點的位置，如果圖像需要平鋪，則從這一點開始平鋪。默認值為左上角的零點位置，這兩個值之間用空格隔開，寫作00。</div><hr><divstyle="background-position:90%10%;"></div></body></html>5.1CSS背景屬性5.1CSS背景屬性5.1.6背景圖像大小屬性background-size語法：background-size:[length|percentage|auto]{1,2}|cover|containdiv{background:url(bg_flower.gif);background-size:100px80px;background-repeat:no-repeat;}5.1CSS背景屬性【例5-6】設(shè)置背景圖片大小，本例文件5-6.html在瀏覽器中顯示的效果如圖5-6所示，對背景圖片進行拉伸，使其完成填充內(nèi)容區(qū)域。<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>背景圖像大小屬性</title></head><body><divstyle="border:1pxsolid#00f;padding:90px5px10px;background:url(images/lotus.jpg)no-repeat;background-size:100%80px">

這里的background-size:100%80px。背景圖像與div一樣寬，高為80px。

</div></body></html>5.1CSS背景屬性5.1.7背景屬性backgroud語法：background:background-color|background-image|background-repeat|background-attachment|background-position示例：body{background:url("images/bg.gif")repeat-y;}div{background:redno-repeatscroll5%60%;}caption{background:#ffff00url("images/bg.gif")no-repeat50%50%;}pre{background:url("images/bg.gif")topright;}5.1CSS背景屬性5.1CSS背景屬性5.1.8背景覆蓋區(qū)域?qū)傩詁ackgroud-clip語法：background-clip:border-box|padding-box|content-box5.1CSS背景屬性【例5-7】設(shè)置背景覆蓋區(qū)域，本例文件5-7.html在瀏覽器中顯示的效果，如圖5-7所示。5.1CSS背景屬性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>背景覆蓋區(qū)域?qū)傩?lt;/title><styletype="text/css">div{width:100px;height:120px;padding:20px;border:5pxdotted;float:left;margin:5px;background:aqua;}</style></head>

5.1CSS背景屬性<body><div>內(nèi)容</div><divstyle="background-clip:border-box;">內(nèi)容</div><divstyle="background-clip:padding-box;">內(nèi)容</div><divstyle="background-clip:content-box;">內(nèi)容</div></body></html>5.1CSS背景屬性5.1.9背景圖像起點屬性backgroup-origin語法：background-origin:padding-box|border-box|content-box5.1CSS背景屬性【例5-8】背景覆蓋起點屬性，本例文件5-8.html在瀏覽器中顯示的效果如圖5-9所示。5.1CSS背景屬性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>background-origin屬性</title><styletype="text/css">div{padding:30px;border:10pxdasheddarkorange;background-image:url('images/apple.jpg');background-size:100px100px;background-repeat:no-repeat;}#div1{background-origin:border-box;}#div2{background-origin:padding-box;}#div3{background-origin:content-box;}</style></head>5.1CSS背景屬性

<divid="div1">

<p>這是文本內(nèi)容。這是文本內(nèi)容。這是文本內(nèi)容。這是文本內(nèi)容。這是文本內(nèi)容。這是文本內(nèi)容。這是文本內(nèi)容。這是文本內(nèi)容。這是文本內(nèi)容。這是文本內(nèi)容。這是文本內(nèi)容。這是文本內(nèi)容。這是文本內(nèi)容。</p>

</div>

<p>background-origin:padding-box：</p>

<divid="div2">

<p>這是文本內(nèi)容。這是文本內(nèi)容。這是文本內(nèi)容。這是文本內(nèi)容。這是文本內(nèi)容。這是文本內(nèi)容。這是文本內(nèi)容。這是文本內(nèi)容。這是文本內(nèi)容。這是文本內(nèi)容。這是文本內(nèi)容。這是文本內(nèi)容。這是文本內(nèi)容。</p>

</div>

<p>background-origin:content-box：</p>

<divid="div3">

<p>這是文本內(nèi)容。這是文本內(nèi)容。這是文本內(nèi)容。這是文本內(nèi)容。這是文本內(nèi)容。這是文本內(nèi)容。這是文本內(nèi)容。這是文本內(nèi)容。這是文本內(nèi)容。這是文本內(nèi)容。這是文本內(nèi)容。這是文本內(nèi)容。這是文本內(nèi)容。</p>

</div></body></html>5.1CSS背景屬性5.1.10背景漸變屬性background-image1.線性漸變語法：background-image:linear-gradient|radial-gradient(direction,color-stop1,color-stop2,...)#div1{background-image:linear-gradient(red,yellow);}#div2{background-image:linear-gradient(toright,red,yellow);}#div3{background-image:linear-gradient(tobottomright,red,yellow);}5.1CSS背景屬性2.使用角度語法：background-image:linear-gradient|radial-gradient(angle,color-stop1,color-stop2)5.1CSS背景屬性【例5-9】背景漸變屬性。本例文件5-9.html在瀏覽器中顯示的效果，如圖5-11所示。<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>背景漸變</title><styletype="text/css">div{width:200px;height:200px;border:5pxdashed;float:left;margin:5px;}</style></head>5.1CSS背景屬性<body><divstyle="background-image:linear-gradient(red,yellow);float:left;">

內(nèi)容1</div><divstyle="background-image:linear-gradient(toright,red,yellow);float:left;">

內(nèi)容2</div><divstyle="background-image:linear-gradient(tobottomright,red,yellow);float:left;">

內(nèi)容3</div><divstyle="background-image:linear-gradient(-90deg,red,yellow);float:left;">

內(nèi)容4</div><divstyle="background-image:linear-gradient(-45deg,red,yellow);float:left;">

內(nèi)容5</div></body></html>5.1CSS背景屬性3.使用多個顏色結(jié)點可以使用多個顏色結(jié)點。例如，下面的代碼創(chuàng)建帶有多個顏色結(jié)點的從上到下的線性漸變：#div5{background-image:linear-gradient(red,yellow,green);}例如，下面代碼創(chuàng)建一個帶有彩虹顏色和文本的線性漸變：#div6{/*標準的語法*/background-image:linear-gradient(toright,red,orange,yellow,green,blue,indigo,violet);}5.1CSS背景屬性4.使用透明度（transparent）例如，下面的代碼從左邊開始的線性漸變。起點是完全透明，慢慢過渡到完全不透明的紅色：#div7{/*從左到右的線性漸變，帶有透明度*/background-image:linear-gradient(toright,rgba(255,0,0,0),rgba(255,0,0,1));}5.1CSS背景屬性5.重復的線性漸變repeating-linear-gradient()函數(shù)用于重復線性漸變。例如，下面代碼是一個重復的線性漸變。#div8{/*標準的語法*/background-image:repeating-linear-gradient(red,yellow10%,green20%);}5.1CSS背景屬性【例5-10】

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論