CSS 設置背景的位置 2.百分比數值

提問人：劉團圓發(fā)布時間：2020-11-18

也可以使用百分比數值對背景圖片的位置進行設置。百分比值的寫法和關鍵字類似，也是需要兩個數值，第一個值設置橫向，第二個值設置縱向。其默認值是： 0%0%。

x% y%

第一個值（x%)是水平位置，第二個值（y%)是垂直位置。左上角逞0% 0%,右下角是100% 100%。如果僅規(guī)定了一個值，則另一個值將是50%。

【例題】使用百分比設置背景圖像的位置

代碼如下：

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

div{

width: 500px;

height: 500px;

border:2px solid red;

background-image: url(img/01.jpg);

background-repeat: no-repeat;

background-position: 50% 50%;

}

</style>

</head>

<body>

<p>使用百分比設置背景圖片的位置</p>

</body>

</html>

相關視頻回答

回復(0)