CSS3 background-size 属性值:cover
生活随笔
收集整理的這篇文章主要介紹了
CSS3 background-size 属性值:cover
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
當設置值為cover,可以呈現出圖片鋪滿瀏覽器內容的視覺效果
?
?
實例
規定背景圖像的尺寸:
div { background:url(img_flwr.gif); background-size:80px 60px; background-repeat:no-repeat; }定義和用法
background-size 屬性規定背景圖像的尺寸。
| auto |
| no |
| CSS3 |
| object.style.backgroundSize="60px 80px" |
語法
background-size: length|percentage|cover|contain;| length | 設置背景圖像的高度和寬度。 第一個值設置寬度,第二個值設置高度。 如果只設置一個值,則第二個值會被設置為 "auto"。 | 測試 |
| percentage | 以父元素的百分比來設置背景圖像的寬度和高度。 第一個值設置寬度,第二個值設置高度。 如果只設置一個值,則第二個值會被設置為 "auto"。 | 測試 |
| cover | 把背景圖像擴展至足夠大,以使背景圖像完全覆蓋背景區域。 背景圖像的某些部分也許無法顯示在背景定位區域中。 | 測試 |
| contain | 把圖像圖像擴展至最大尺寸,以使其寬度和高度完全適應內容區域。 | 測試 |
轉載于:https://www.cnblogs.com/kenshinobiy/p/5355286.html
總結
以上是生活随笔為你收集整理的CSS3 background-size 属性值:cover的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 为何使用消息系统
- 下一篇: Android记录一个setTextCo