css怎么让背景图片铺满?
生活随笔
收集整理的這篇文章主要介紹了
css怎么让背景图片铺满?
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
css讓圖片鋪滿的方法:可以使用background-size:cover樣式設(shè)置背景圖片鋪滿。background-size屬性規(guī)定背景圖像的尺寸。
豌豆資源搜索網(wǎng)站https://55wd.com 廣州vi設(shè)計公司http://www.maiqicn.com
豌豆資源搜索網(wǎng)站https://55wd.com 廣州vi設(shè)計公司http://www.maiqicn.com
background-size 屬性:
background-size 屬性規(guī)定背景圖像的尺寸。
語法:
background-size: length|percentage|cover|contain;
默認值:auto
繼承性:no
版本:css3
JavaScript語法:object.style.backgroundSize="60px 80px"
屬性值:
| 值 | 描述 |
|---|---|
| length | 設(shè)置背景圖像的高度和寬度。
第一個值設(shè)置寬度,第二個值設(shè)置高度。 如果只設(shè)置一個值,則第二個值會被設(shè)置為 "auto"。 |
| percentage | 以父元素的百分比來設(shè)置背景圖像的寬度和高度。
第一個值設(shè)置寬度,第二個值設(shè)置高度。 如果只設(shè)置一個值,則第二個值會被設(shè)置為 "auto"。 |
| cover | 把背景圖像擴展至足夠大,以使背景圖像完全覆蓋背景區(qū)域。
背景圖像的某些部分也許無法顯示在背景定位區(qū)域中。 |
| contain | 把圖像圖像擴展至最大尺寸,以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域。 |
background-size:cover樣式設(shè)置背景圖片鋪滿示例:
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background:url(/i/bg_flower.gif);
background-size:cover;
-moz-background-size:cover; /* 老版本的 Firefox */
background-repeat:no-repeat;
padding-top:80px;
}
</style>
</head>
<body>
</body>
</html>
總結(jié)
以上是生活随笔為你收集整理的css怎么让背景图片铺满?的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 优化JS代码性能
- 下一篇: 如何查看路由器的mac和计算机的mac