溫馨提示×

background-position詳解

小云
148
2024-02-01 17:53:47
欄目: 編程語言

background-position屬性用于設置背景圖片的起始位置。

語法: background-position: x y;

屬性值:

  • x:水平方向的起始位置。可以使用具體的像素值(如10px),也可以使用百分比值(如50%)。默認值為50%。
  • y:垂直方向的起始位置??梢允褂镁唧w的像素值(如10px),也可以使用百分比值(如50%)。默認值為50%。

如果只指定一個值,則該值將應用于水平和垂直方向的起始位置。

示例: background-position: 0 0; // 將背景圖片的起始位置設置為左上角 background-position: center; // 將背景圖片的起始位置設置為居中 background-position: right bottom; // 將背景圖片的起始位置設置為右下角 background-position: 20% 40%; // 將背景圖片的起始位置設置為水平方向上的20%,垂直方向上的40%

可以使用負值來設置背景圖片相對于容器的偏移。

示例: background-position: -10px -20px; // 將背景圖片的起始位置向左上方偏移10像素和20像素

注意:如果背景圖片的寬度或高度小于容器的寬度或高度,則背景圖片將被拉伸以填滿整個容器。在這種情況下,起始位置的設置可能不會產生預期的效果。

0