CSS 中圖片怎么重復(fù)?
在 CSS 中,我們可以通過 background-repeat 屬性來控制圖片的重復(fù)方式。該屬性有以下取值:
- repeat:默認(rèn)值,圖片會在水平和垂直方向上重復(fù)。
- repeat-x:圖片只在水平方向上重復(fù)。
- repeat-y:圖片只在垂直方向上重復(fù)。
- no-repeat:圖片不重復(fù),只顯示一次。
例如,我們要將一個背景圖片在水平方向上重復(fù),可以這樣寫:
```html```
如果要在代碼中顯示這段 CSS 樣式,可以使用 pre 標(biāo)簽:
```html
body { background-image: url("bg.jpg"); background-repeat: repeat-x; }``` 上面的代碼會在頁面上以純文本的形式顯示,不會被瀏覽器解析為樣式表。如果想要在頁面上呈現(xiàn)為代碼格式,可以使用 PrismJS 等代碼高亮插件。 需要注意的是,當(dāng)圖片的寬度或高度小于元素的寬度或高度時,會出現(xiàn)“平鋪效果”,即圖片在元素內(nèi)部重復(fù)顯示。可以使用 background-size 屬性來控制圖片的尺寸。例如,設(shè)置 background-size: cover; 可以讓圖片填滿整個元素,但可能會裁剪部分圖片。設(shè)置 background-size: contain; 可以讓圖片完全顯示,但可能會出現(xiàn)留白。 希望這篇文章對你有所幫助!