CSS3背景定位是一種非常有意義并且常用的技術。它讓我們可以很容易地控制元素背景圖片的位置以及其是否重復出現。
background-position: x y;
背景定位的語法非常簡單,只需要在元素的CSS樣式中使用background-position屬性即可,其中x和y代表的是水平和垂直方向的位置,可以使用像素、百分比、關鍵字等作為值。如果只寫一個值,那么另一個值會默認為center。
background-position: top right; background-position: bottom left; background-position: center center;
除了可以直接指定位置外,CSS3背景定位還提供了幾個快速定位演示方便開發者使用。可以使用top、bottom、left、right、center代替具體數值來實現快速定位。
在使用background-position屬性時,還可以結合background-repeat屬性一起使用,控制背景圖片是否重復出現。比如,使用background-repeat: no-repeat;可以讓背景圖片只出現一次。
background-repeat: no-repeat; background-repeat: repeat-x; background-repeat: repeat-y; background-repeat: repeat;
最后,值得一提的是,背景定位也可以結合圖像精靈技術使用,來實現頁面的高性能和流暢度。
上一篇css3背景制作教程
下一篇css3背景圖片充滿