CSS中怎么實(shí)現(xiàn)背景圖片平鋪
這篇文章將為大家詳細(xì)講解有關(guān)CSS中怎么實(shí)現(xiàn)背景圖片平鋪，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。
創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比團(tuán)風(fēng)網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式團(tuán)風(fēng)網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋團(tuán)風(fēng)地區(qū)。費(fèi)用合理售后完善，十余年實(shí)體公司更值得信賴。
CSS背景圖片平鋪技巧
使用CSS來(lái)設(shè)置背景圖片同傳統(tǒng)的做法一樣簡(jiǎn)單，但相對(duì)于傳統(tǒng)控制方式，CSS提供了更多的可控選項(xiàng)，我們先來(lái)看看最基本的設(shè)置圖片的方法。xhtml代碼：
代碼如下:
CSS代碼：
代碼如下:
#content{ border:1pxsolid#000fff; height:500px; background-image:url(images/bg.GIF); }◆網(wǎng)頁(yè)中id為content的元素被我們?cè)O(shè)置了使用images文件夾下的bg.GIF作為背景，與傳統(tǒng)表格式布局中的設(shè)置并無(wú)差別，在默認(rèn)狀態(tài)下，背景同樣以平鋪的方式出現(xiàn)在元素之中。然而使用CSS來(lái)控制背景當(dāng)然不可能如此簡(jiǎn)單，實(shí)際上CSS為我們提供了更多用于控制背景的屬性，包含可以控制元素是否需要平鋪。改進(jìn)后的代碼：
代碼如下:
#content{ border:1pxsolid#000fff; height:500px; background-image:url(images/bg.GIF); background-repeat:repeat-x; }◆加了background-repeat:repeat-x;之后,背景現(xiàn)在只在X軸即橫向進(jìn)行了平鋪操作，縱向并沒(méi)有進(jìn)行平鋪。這便是CSS對(duì)于背景細(xì)節(jié)的控制之一。background-repeat是針對(duì)背景平鋪的屬性設(shè)置，可選的值包含：
代碼如下:
repeat即默認(rèn)方式，完全平鋪背景； no-repeat在X及Y軸方向均不平鋪； repeat-x橫向平鋪背景； repeat-y縱向平鋪背景。
關(guān)于CSS中怎么實(shí)現(xiàn)背景圖片平鋪就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。
分享標(biāo)題：CSS中怎么實(shí)現(xiàn)背景圖片平鋪
轉(zhuǎn)載來(lái)源：
http://weahome.cn/article/pdjcps.html
重慶分公司
重慶分公司
