CSS3的background定位屬性可以幫助我們很方便地控制背景圖片的位置和大小。我們可以通過background-position屬性來定位背景圖片的左上角位置,也可以通過background-size屬性來控制背景圖片的大小。
background-position: x軸位置 y軸位置; background-size: 寬度 高度;
其中,background-position屬性可以接受多個值來表示背景圖片在水平和垂直方向上的位置。比如:
background-position: center top; /*水平居中,垂直頂部*/ background-position: left bottom; /*左對齊,垂直底部*/ background-position: -20px 50%; /*距離左邊20像素,垂直居中*/
除了指定位置外,我們也可以使用關鍵字來指定背景圖片的位置。比如:
background-position: top; /*垂直頂部*/ background-position: center; /*水平居中,垂直居中*/ background-position: bottom; /*垂直底部*/ background-position: left; /*左對齊,垂直居中*/ background-position: right; /*右對齊,垂直居中*/
當我們需要控制背景圖片的大小時,可以使用background-size屬性。它可以接受百分比、固定大小、自動大小和覆蓋大小等多種值。
background-size: 100% auto; /*寬度占滿,高度自適應*/ background-size: 300px 200px; /*固定大小*/ background-size: contain; /*寬度和高度均不超過容器大小*/ background-size: cover; /*寬度和高度均覆蓋容器大小*/
使用background定位屬性可以輕松地控制背景圖片在網頁中的顯示效果,提供了豐富的搭配方式,使我們可以更加方便地制作出精美的網頁。