CSS 設(shè)置背景的位置 3.絕對(duì)數(shù)值

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

還可以使用絕對(duì)數(shù)值來(lái)對(duì)背景圖片的位置進(jìn)行設(shè)置，寫(xiě)法如下:

xpos ypos

第一個(gè)值（xpos)是水平位置，第二個(gè)值（ypos)是垂直位置。左上角是0 0。單位是像素（OpxOpx) 或任何其他的CSS單位。如果僅規(guī)定了一個(gè)值，則另一個(gè)值將是50%?？梢曰旌鲜褂茫ズ蚿osition值。

下面用一個(gè)案例來(lái)看下使用絕對(duì)數(shù)值是如何操作的。

【例題】使用絕對(duì)數(shù)值設(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: 100px 200px;

}

</style>

</head>

<body>

<p>使用絕對(duì)數(shù)值設(shè)置背景圖片的位置</p>

</body>

</html>

相關(guān)視頻回答

回復(fù)(0)