在CSS中,可以使用背景位置屬性(background-position
)來移動背景圖,這個屬性接受兩個值,分別代表水平和垂直方向上的移動,下面是一些示例:
示例1:水平移動
div { background-image: url('example.jpg'); background-position: 50px 0; }
示例2:垂直移動
div { background-image: url('example.jpg'); background-position: 0 50px; }
示例3:同時移動
div { background-image: url('example.jpg'); background-position: 50px 50px; }
示例4:使用百分比移動
div { background-image: url('example.jpg'); background-position: 25% 75%; }
示例5:移動背景圖***右下角
div { background-image: url('example.jpg'); background-position: right bottom; }
示例6:移動背景圖***左上角
div { background-image: url('example.jpg'); background-position: left top; }
示例7:使用關(guān)鍵詞移動(如top
、right
等)
div { background-image: url('example.jpg'); background-position: right top; /* 將背景圖移動到右上角 */ }
示例8:使用auto
關(guān)鍵字重置位置到默認(rèn)值(即不移動)
div { background-image: url('example.jpg'); background-position: auto auto; /* 重置位置到不移動 */ }
版權(quán)聲明:除非特別標(biāo)注,否則均為本站原創(chuàng)文章,轉(zhuǎn)載時請以鏈接形式注明文章出處。