CSS 設(shè)置背景的位置 2.百分比數(shù)值

提問(wèn)人：劉團(tuán)圓發(fā)布時(shí)間：2020-11-18

也可以使用百分比數(shù)值對(duì)背景圖片的位置進(jìn)行設(shè)置。百分比值的寫(xiě)法和關(guān)鍵字類似，也是需要兩個(gè)數(shù)值，第一個(gè)值設(shè)置橫向，第二個(gè)值設(shè)置縱向。其默認(rèn)值是： 0%0%。

x% y%

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

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

代碼如下：

<!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>使用百分比設(shè)置背景圖片的位置</p>

</body>

</html>

相關(guān)視頻回答

回復(fù)(0)