CSS中如何實(shí)現(xiàn)背景圖片平鋪
這篇文章主要講解了“CSS中如何實(shí)現(xiàn)背景圖片平鋪”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“CSS中如何實(shí)現(xiàn)背景圖片平鋪”吧！
創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司一直秉承“誠(chéng)信做人，踏實(shí)做事”的原則，不欺瞞客戶(hù)，是我們最起碼的底線(xiàn)！ 以服務(wù)為基礎(chǔ)，以質(zhì)量求生存，以技術(shù)求發(fā)展，成交一個(gè)客戶(hù)多一個(gè)朋友！專(zhuān)注中小微企業(yè)官網(wǎng)定制，成都做網(wǎng)站、網(wǎng)站建設(shè)，塑造企業(yè)網(wǎng)絡(luò)形象打造互聯(lián)網(wǎng)企業(yè)效應(yīng)。
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縱向平鋪背景。
感謝各位的閱讀，以上就是“CSS中如何實(shí)現(xiàn)背景圖片平鋪”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)CSS中如何實(shí)現(xiàn)背景圖片平鋪這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
分享名稱(chēng)：CSS中如何實(shí)現(xiàn)背景圖片平鋪
文章路徑：
http://weahome.cn/article/ghgsii.html
重慶分公司
重慶分公司
