css怎么让背景图片铺满?
生活随笔
收集整理的這篇文章主要介紹了
css怎么让背景图片铺满?
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
css讓圖片鋪滿的方法:可以使用background-size:cover樣式設置背景圖片鋪滿。background-size屬性規定背景圖像的尺寸。
豌豆資源搜索網站https://55wd.com 廣州vi設計公司http://www.maiqicn.com
豌豆資源搜索網站https://55wd.com 廣州vi設計公司http://www.maiqicn.com
background-size 屬性:
background-size 屬性規定背景圖像的尺寸。
語法:
background-size: length|percentage|cover|contain;
默認值:auto
繼承性:no
版本:css3
JavaScript語法:object.style.backgroundSize="60px 80px"
屬性值:
| 值 | 描述 |
|---|---|
| length | 設置背景圖像的高度和寬度。
第一個值設置寬度,第二個值設置高度。 如果只設置一個值,則第二個值會被設置為 "auto"。 |
| percentage | 以父元素的百分比來設置背景圖像的寬度和高度。
第一個值設置寬度,第二個值設置高度。 如果只設置一個值,則第二個值會被設置為 "auto"。 |
| cover | 把背景圖像擴展至足夠大,以使背景圖像完全覆蓋背景區域。
背景圖像的某些部分也許無法顯示在背景定位區域中。 |
| contain | 把圖像圖像擴展至最大尺寸,以使其寬度和高度完全適應內容區域。 |
background-size:cover樣式設置背景圖片鋪滿示例:
<!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>
總結
以上是生活随笔為你收集整理的css怎么让背景图片铺满?的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 优化JS代码性能
- 下一篇: hdu 5256 序列变换 (LIS变形