|
第四十節(jié) css樣式表應(yīng)用（6）  本節(jié)繼續(xù)講解css樣式表的應(yīng)用,。本節(jié)講解的內(nèi)容為：一,、小圖片中輸入文字，二,、兩種濾鏡聯(lián)合制作的文字,，三,、濾鏡圖片中添加濾鏡文字,，四、表格標(biāo)簽中調(diào)用css濾鏡樣式,，五,、濾鏡的四種設(shè)置方法。 一,、小圖片中輸入文字：
代碼：
<div align="center">
<table style="border-color: rgb(0, 200, 0); left: 0px; top: 0px; width: 150px; height: 140px; position: relative;" id="table1" border="0"> <tbody> <tr> <td><img style="border-width: 0px; margin: 0px; left: 0px; top: 0px; width: 150px; height: 140px;" src=" http://image53.360doc.com/DownloadImg/2012/07/0702/25343378_3.gif width="150" height="140">
<div style="left: 2px; top: 117px; position: absolute;" class="divBorderStyle" width="150" height="140"><font style="line-height: normal; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal;" color="#ffff00"><b>“春天沒來”歡迎您</b></font></div></td></tr></tbody></table></div>
設(shè)置說明：
?。薄⒔裉熘v解的內(nèi)容與上一節(jié)講解的“相框中放入靜止相片”方法有點(diǎn)兒不同,。上一節(jié)講解的“相框中放入靜止相片”,，是通過給相框所在的塊區(qū)標(biāo)簽中設(shè)置絕對定位的“居左”與“居上”的負(fù)值，把相框疊加在（套在）相片上,，從而讓相片正好顯示在相框的方框內(nèi),。今天講解的內(nèi)容是要把文字疊加在圖片上，而且要正好疊加到小圖片下方的方框內(nèi)。
?。?、在居中的塊區(qū)中設(shè)置一個一行一列的表格。表格的單元格中先放入一個小圖片,，再設(shè)置一個塊區(qū),。在剛設(shè)置的塊區(qū)中輸入幾個文字（文字不能過多）。
?。?、表格標(biāo)簽的寬度和高度與小圖片的規(guī)格要相同，表格標(biāo)簽中要設(shè)置相對定位代碼,，相對定位代碼的“居左”數(shù)值與“居上”數(shù)值都設(shè)置為0px,。
４,、塊區(qū)標(biāo)簽中要設(shè)置絕對定位代碼,，絕對定位的參考點(diǎn)是小圖片的右上角，絕對定位代碼的“居左”數(shù)值與“居上”數(shù)值都要設(shè)置為正數(shù),。
?。怠⑽淖謽?biāo)簽的顏色可選擇自己喜歡的顏色,，文字標(biāo)簽的字號要配合塊區(qū)標(biāo)簽的“居左”數(shù)值與“居上”數(shù)值一并調(diào)試修改,，一直調(diào)試修改到輸入的文字正好放入小圖片下方的小方框內(nèi)為止。
二,、兩種濾鏡聯(lián)合制作的文字：
代碼舉例：
<center><table border="0" cellSpacing="5" cellPadding="0" width="68%" align="center">
<tbody> <tr> <td style="filter: mask(color=#af9261) shadow(color=#000000,direction=45);" align="center"><font style="width: 100%; color: rgb(250, 0, 0); line-height: 150%; font-family: 黑體; font-size: 80pt;"><b><i>蛇年大吉</i></b></font></td></tr> <tr> <td style="filter: mask(color=#a092f1) shadow(color=#00f000,direction=135);" align="center"><font style="width: 100%; color: rgb(250, 0, 0); line-height: 150%; font-family: 黑體; font-size: 80pt;"><b><i>蛇年大吉</i></b></font></td></tr> <tr> <td style="filter: mask(color=#a09261) shadow(color=#000fa0,direction=135);" align="center"><font style="width: 100%; color: rgb(250, 0, 0); line-height: 150%; font-family: 黑體; font-size: 80pt;"><b><i>蛇年大吉</i></b></font></td></tr> <tr> <td style="filter: mask(color=#000000) shadow(color=#ff00ff,direction=225);" align="center"><font style="width: 100%; color: rgb(250, 0, 250); line-height: 150%; font-family: 黑體; font-size: 80pt;"><b><i>蛇年大吉</i></b></font></td></tr> </tbody></table></center> 注釋：
?。薄⑸厦?FONT style="FONT-SIZE: 21px" size=3>兩種濾鏡聯(lián)合制作的文字由shadow濾鏡決定文字的顏色和陰影方向,，由mask濾鏡決定背景顏色（即矩形遮罩）,，由文字標(biāo)簽決定文字的大小、字體,、行高,。
２,、要把濾鏡的代碼style="filter: mask(color=#000000) shadow(color=#ff00ff,direction=225);" 設(shè)置在表格的列標(biāo)簽中,。
效果：
三、濾鏡圖片中添加濾鏡文字： 代碼舉例：
<div align="center">
<table style="border-color: rgb(0, 200, 0); left: 0px; top: 0px; width: 350px; height: 525px; position: relative;" id="table1" border="1"> <tbody> <tr> <td bgColor="#000000" vAlign="middle" background=" http://image7.360doc.com/DownloadImg/2010/03/0602/2474078_21.jpg"><img style="margin: 0px 10px; width: 350px; height: 525px; float: none; filter: Alpha(Opacity=150,Style=2); cssfloat: none;" alt="" src=" http://image58.360doc.com/DownloadImg/2013/02/0911/30221765_9.jpg " width="600">
<div style="left: 30px; top: 0px; position: absolute;" class="divBorderStyle" height="80" width="350"> <table border="0" cellSpacing="5" cellPadding="0" width="350" align="center"> <tbody> <tr> <td style="filter: mask(color=#000000) shadow(color=#00ff00,direction=225);" align="center"><font style="width: 100%; height: 80px; color: rgb(255, 80, 0); line-height: 150%; font-family: 黑體; font-size: 20pt;"><strong>紅 紅 火 火 過 大 年</strong></font></td></tr></tbody></table></div></td></tr></tbody></table></div> 設(shè)置說明：
效果：
四,、表格標(biāo)簽中調(diào)用css濾鏡樣式：
在表格標(biāo)簽中設(shè)置css濾鏡樣式,，表格內(nèi)輸入的文字與粘貼的圖片都會有濾鏡效果。不過,，應(yīng)該注意的是：如果只使用一層表格,，在表格標(biāo)簽中設(shè)置了背景顏色或者背景圖片的話,，濾鏡效果將不會顯示出來。因此,，最好使用兩層以上的多重表格,，在最里層的表格標(biāo)簽中不要設(shè)置背景顏色或者背景圖片。
代碼舉例： 例1：沒有背景顏色或者背景圖片的一層表格： 代碼：
<table style="filter: shadow(color:#00f00f ,direction:120,strength:30);" border="2" cellSpacing="35" borderColor="#ee0000" cellPadding="0" align="center">
<tbody> <tr> <td> <font style="line-height: normal; font-size: 40pt; font-style: normal; font-variant: normal; font-weight: normal;" color="#ff00ff"><strong>“春 天 沒 來” 歡 迎 您</strong></font></td></tr> <tr> <td><img border="0" alt="濾鏡圖片" src=" http://image58.360doc.com/DownloadImg/2013/02/0318/30119921_2.jpg " width="750" height="1098">
</td></tr></tbody></table> 效果：
例2：二層表格：
代碼： <table border="0" cellSpacing="10" cellPadding="0" width="800" background="
http://image7.360doc.com/DownloadImg/2010/03/0602/2474078_27.jpg " height="1098">
<tbody> <tr> <td> <table style="filter: shadow(color:#ffff00 ,direction:120,strength:20);" border="2" cellSpacing="35" borderColor="#ee0000" cellPadding="0" align="center"> <tbody> <tr> <td> <font style="line-height: normal; font-size: 40pt; font-style: normal; font-variant: normal; font-weight: normal;" color="#ff00ff"><strong>“春 天 沒 來” 歡 迎 您</strong></font></td></tr> <tr> <td><img border="0" alt="濾鏡圖片" src=" http://image58.360doc.com/DownloadImg/2013/02/0318/30119921_2.jpg " width="750" height="1098">
</td></tr> </tbody></table></td></tr></tbody></table> 效果：
五,、濾鏡的四種設(shè)置方法：（以濾鏡圖片為例）
方法一：在圖片標(biāo)簽中設(shè)置濾鏡樣式：
代碼舉例： <img style="filter: Xray;" id="Xray濾鏡圖片" src=" http://userimage3.360doc.com/13/0110/16/10892606_201301101619050934.jpg " width="375" height="553">
說明：
在方法一中,，如果設(shè)置了圖片規(guī)格，就會按照設(shè)置的規(guī)格顯示圖片,；如果不設(shè)置圖片規(guī)格,，就會按照原規(guī)格顯示圖片。
效果：
 方法二：在塊區(qū)標(biāo)簽中設(shè)置濾鏡樣式,，塊區(qū)標(biāo)簽與圖片標(biāo)簽相配合：
代碼舉例：
<div style="width: 375px; height: 553px; filter: Xray;" id="Xray濾鏡圖片"><img src="
http://image51.360doc.com/DownloadImg/2012/05/1609/24115099_15.jpg " width="375" height="553"></div> 說明：
在方法二中,，塊區(qū)標(biāo)簽與圖片標(biāo)簽的規(guī)格要相一致。塊區(qū)標(biāo)簽的規(guī)格縮小,，就會剪切圖片的右部與下部,；塊區(qū)標(biāo)簽的規(guī)格擴(kuò)大，不會改變圖片的大小,。圖片標(biāo)簽的規(guī)格擴(kuò)大,，圖片就擴(kuò)大；圖片標(biāo)簽的規(guī)格縮小,，圖片就縮小,。
效果：
 代碼舉例：
<div style="padding: 5px; width: 500px; height: 455px; background-color: rgb(0, 0, 0);"><img style="border-width: 0px; margin: 0px; width: 500px; height: 455px; filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, FinishX=0, StartY=0, FinishY=0);" border="0" src="
http://image58.360doc.com/DownloadImg/2013/02/0118/30083891_1.jpg"></div >
說明：
在方法三中,，塊區(qū)標(biāo)簽與圖片標(biāo)簽的規(guī)格要相一致。如果要設(shè)置圖片的外邊距,，例如：margin: 10px,，塊區(qū)標(biāo)簽的高度與寬度必須增加外邊距的2倍（20px）。
效果：
 方法四：濾鏡圖片要與原圖片共同顯示,，進(jìn)行對比,，應(yīng)該把圖片放置在一個一行二列的表格中,，才能夠在同一行顯示,。（如果把兩個圖片都放在同一個單元格內(nèi)，一行大約可容納740px左右的圖片,。）
代碼舉例：
<table border="1" cellPadding="0" width="750" background="地址" height="553">
<tbody> <tr> <td>原圖片<br><img id="原圖片" src=" http://userimage3.360doc.com/13/0110/16/10892606_201301101619050934.jpg " width="375" height="553"></td> div> 說明：<td>FlipH濾鏡圖片<br><img style="filter: FlipH;" id="FlipH濾鏡圖片" src=" http://userimage3.360doc.com/13/0110/16/10892606_201301101619050934.jpg" width="375" height="553"></td></tr></tbody></table> 一行二列的表格中,，一個單元格放入原圖片，另一個單元格放入FlipH濾鏡圖片,。
效果：
作業(yè)：
?。?、認(rèn)真閱讀代碼解析與設(shè)置說明，細(xì)致觀察顯示效果,，深刻體會上面講解的幾種代碼的設(shè)置要點(diǎn),。
２,、“小圖片中輸入文字”,，仍然應(yīng)用css的絕對定位與相對定位的樣式。復(fù)習(xí)鞏固絕對定位與相對定位的表達(dá)方式以及它們各自的參考點(diǎn),。
?。场ⅰ皟煞N濾鏡聯(lián)合制作的文字”,，我只舉了一個例子,。是mask濾鏡與shadow濾鏡的聯(lián)合應(yīng)用，其它濾鏡的聯(lián)合應(yīng)用,，自己試著制作一下,。
４,、“濾鏡圖片中添加濾鏡文字”,，是濾鏡文字與濾鏡圖片的聯(lián)合制作技巧，你可以再聯(lián)合移動標(biāo)簽等內(nèi)容,，試著制作幾篇文章觀察一下,，可能會制作出你想象不到的效果來。
?。?、應(yīng)用濾鏡的特殊效果制作的邊框，特別有趣,，你不妨試著制作幾個不同濾鏡效果的邊框,。
６,、應(yīng)用“濾鏡的四種設(shè)置方法”,，各制作一篇文章，學(xué)會在什么情況下,，應(yīng)該應(yīng)用哪種設(shè)置方法,。
|
|
|
