A. css 背景圖片的定位
關鍵字, 例如: background-position: top right;
優點: 直觀, 可用性高, 各瀏覽器中表現一致.
缺點: 缺少間隔尺寸. 三個垂直的 (top, center, bottom) 和三個水平的 (left, center, right) 只能為你組合出最多 9 個位置. 不存在其他混式的組合. 並且很難像其他兩種數值定位方法一樣使用算數進行控制像素, 例如: background-position: 0px 0px;
優點: 概念容易被理解, 只要知道如何測量容器左上角和圖片左上角之間的距離, 就能准確地推測出圖片顯示的位置. 像素還能夠精確的用數學來控制定位.
缺點: 你必須知道確實的值.
原理, 如圖. 其實就是圖片左上角相對於容器左上角的坐標關系.
B. 如何用css精確定位小圖片的位置
如何用css精確定位小圖片的位置
首先設置固定圖片的css屬性是background-attachment
background-attachment它有兩個屬性值fixed/scroll
background-attachment：fixed;表示固定圖片，圖片不隨著頁面滾動而滾動。
background-attachment：scroll；表示不固定圖片，圖片隨著頁面滾動而滾動
background-position這個屬性用來定點陣圖片的位置。
我們重點給大家分享background-position這個屬性
2background-position;的語法結構，用水平和垂直位置進行定位。
background-position:x y;
其中，x有三個值：left(左)，center(中),right(右)。用來設置水平位置；
y也有三個值：top（上）,center(中)，bottom(下)。用來設置垂直位置；
兩個屬性值得中間一定要用英文的空格 ，隔開。
代碼如下：
<style type="text/css">
<!--
#img{
background-image:url("圖片存放路徑"); /*插入背景圖*/
background-repeat:no-repeat; /*設置圖片不重復*/
background-color:#00ffff; /*設置背景顏色*/
background-position:left center; /*用居中對齊設置水平距離，用下面對齊設置垂直距離*/
width:400px; height:150px; /*設置寬度 和高度*/
}
-->
</style>
<div id="img"></div>
3background-position:左邊距離 上邊距離。這個用來找圖片。
比如一張大圖上面有很多小圖，你只想用到其中一個小圖就用這個找。
代碼如下：
<html>
<head>
<style type="text/css">
#main{
{
background-image:url("圖片存放路徑"); /*插入背景圖*/
background-repeat:no-repeat; /*設置圖片不重復*/
background-color:#00ffff; /*設置背景顏色*/
background-position:60px 50px; /*設置水平距離和垂直距離*/
width:400px; height:200px;
}
</style>
</head>
<body>
<div id="main"></div>
</body>
</html>
C. css怎麼調整背景圖片的位置
1、首先打開前端開發工具，新建一個html代碼頁面。
D. css如何控制圖片位置
1、首先我們需要插入一張圖片，並且圖片只出現一次，並設計圖片出現的位置在左上角，可以按照如下代碼來完成：
<html>
<head>
<title>圖片位置設置</title>
<style type="text/css">
body{
background-image:url("2.jpg");
background-attachment:scorll;
background-repeat:no-repeat;
background-position:top left;
}
</style>
</head>
<body>
</body>
</html>
可以看到背景圖片出現的位置在瀏覽器的左上角，這個和默認的設置是一樣的。
E. CSS怎麼樣讓背景圖片水平（垂直）居中
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title></title>
</head>
<bodyclass="bodybg">
<h2>針對當前div層背景居中</h2>
<h3>ps:背景圖片是需要高度和內容撐開的。沒有高度沒有內容，背景圖片是無法顯示的</h3>
<divclass="bgImg">
</div>
</body>
<styletype="text/css">
.bgImg{
background:url(images/2.png)centerno-repeat;/*這個是簡寫,可以分開寫*/
/*background-position:centercenter;*/
/*background-image:url(images/2.png);*/
/*background-repeat:no-repeat;*/
width:200px;
height:200px;
border:1pxsolid#000000;
}
.bodybg{
background:url(images/2-1.png)centerno-repeat;
height:100vh; /*一屏高度的表示*/
}
</style>
</html>
F. html css 如何一張圖片鋪滿整個背景，不留空白的。並且圖片是固定的
(1)body{background:url(背景圖) repeat;} 說明：repeat表示背景圖的平鋪方式！其實一般你將一張圖片作為背景時，會默認為平鋪，所以不需要刻意去設置，相反如果我們不想圖片平鋪那麼這時就需要設置為no-repeat;這時圖片就會按原來的尺寸顯示！
（2）如果圖片過小，那麼圖片平鋪就會出現重復的地方，其實和把一張圖片設置為桌面牆紙類似！ 我試過了，想要想鋪滿但是不重復的話選擇一張1024X768的圖片，當然這只是針對顯示器為1024X768的！ 具體選擇就看你顯示器的解析度了！
G. css如何使背景圖片水平居中
方法和詳細的操作步驟如下：
1、第一步，打開前端開發工具，然後創建一個新的html代碼頁，見下圖，轉到下面的步驟。