溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css中的background-repeat屬性怎么用

發(fā)布時(shí)間：2022-02-25 13:50:57 來源：億速云 閱讀：191 作者：小新 欄目：web開發(fā)

這篇文章主要介紹css中的background-repeat屬性怎么用，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

　　CSSbackground-repeat屬性

　　作用：設(shè)置是否及如何重復(fù)背景圖像。

　　基本語法：

　　background-repeat:repeat|repeat-x|repeat-y|no-repeat;

　　repeat：默認(rèn)值，背景圖像將向垂直和水平方向重復(fù)。

　　repeat-x：只有水平位置會(huì)重復(fù)背景圖像。

　　repeat-y：只有垂直位置會(huì)重復(fù)背景圖像。

　　no-repeat：設(shè)置背景圖片不會(huì)重復(fù)。

　　說明：background-repeat屬性定義了圖像的平鋪模式。從原圖像開始重復(fù)，原圖像由background-image定義，并根據(jù)background-position的值放置。

　　CSSbackground-repeat屬性的使用示例

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="utf-8">

　　<title>菜鳥教程(runoob.com)</title>

　　<style>

　　.demo1{

　　width:400px;

　　height:150px;

　　border:1pxsolidred;

　　background-image:url('https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png');

　　background-repeat:repeat;

　　}

　　.demo2{

　　width:400px;

　　height:100px;

　　border:1pxsolidred;

　　background-image:url('https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png');

　　background-repeat:no-repeat;

　　}

　　.demo3{

　　width:400px;

　　height:150px;

　　border:1pxsolidred;

　　background-image:url('https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png');

　　background-repeat:repeat-x;

　　}

　　.demo4{

　　width:400px;

　　height:400px;

　　border:1pxsolidred;

　　background-image:url('https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png');

　　background-repeat:repeat-y;

　　}

　　</style>

　　</head>

　　<body>

　　<h4>repeat設(shè)置背景圖片向垂直和水平方向重復(fù)</h4>

　　<divclass="demo1"></div>

　　<h4>no-repeat設(shè)置背景圖片不重復(fù)</h4>

　　<divclass="demo2"></div>

　　<h4>repeat-x設(shè)置背景圖片向水平方向重復(fù)</h4>

　　<divclass="demo3"></div>

　　<h4>repeat-y設(shè)置背景圖片向垂直方向重復(fù)</h4>

　　<divclass="demo4"></div>

　　</body>

　　</html>

以上是“css中的background-repeat屬性怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手