① 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>
可以看到背景圖片出現的位置在瀏覽器的左上角，這個和默認的設置是一樣的。
② css 背景圖片的定位
關鍵字, 例如: background-position: top right;
優點: 直觀, 可用性高, 各瀏覽器中表現一致.
缺點: 缺少間隔尺寸. 三個垂直的 (top, center, bottom) 和三個水平的 (left, center, right) 只能為你組合出最多 9 個位置. 不存在其他混式的組合. 並且很難像其他兩種數值定位方法一樣使用算數進行控制像素, 例如: background-position: 0px 0px;
優點: 概念容易被理解, 只要知道如何測量容器左上角和圖片左上角之間的距離, 就能准確地推測出圖片顯示的位置. 像素還能夠精確的用數學來控制定位.
缺點: 你必須知道確實的值.
原理, 如圖. 其實就是圖片左上角相對於容器左上角的坐標關系.
③ 如何用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>
④ css如何使背景圖片水平居中
方法和詳細的操作步驟如下：
1、第一步，打開前端開發工具，然後創建一個新的html代碼頁，見下圖，轉到下面的步驟。
⑤ 利用CSS定位背景圖片到底定位在哪
設置background-repea屬性
repeat 默認。背景圖像將在垂直方向和水平方向重復。
repeat-x 背景圖像將在水平方向重復。
repeat-y 背景圖像將在垂直方向重復。
no-repeat 背景圖像將僅顯示一次。
inherit 規定應該從父元素繼承 background-repeat 屬性的設置。
和background-position屬性
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
⑥ 如何調整css背景圖片的位置
你的CSS樣式寫的太不規范了，
#Channel_boundary{
width:1px;
background: #D4D0C8 repeat-y;
float:left;
height:60%;
line-height:60%;
background-position:10px 20px;
}
設置背景色的時候，不能用repeat-y這類屬性，也不能用背景定位background-position，這些屬性只用在背景圖片的時候。還有在設置高度的時候最好不要用百分比，將樣式修改一下就OK了。如下：
#Channel_boundary{
width:1px;
background-color: #D4D0C8;
float:left;
height:20px;
margin-top:10px;
overflow:hidden;
}
height和margin-top的值可以自行調整，直到你滿意的位置為止。
⑦ css怎麼調整背景圖片的位置
背景圖片位置在CSS中有專門的屬性來調整：background-position:x y;
x的意思是x軸的數值、百分比，位置。
y的意思是y軸的數值、百分比，位置。
你可以在你的CSS圖片屬性里加上background-position:10px 50px;
⑧ CSS使用圖片做背景，如何精確定點陣圖片位置
根據你的圖片做了下面的樣式，主要做法是定位，切割圖片，可以使用windows的畫圖工具先定位每個你需要的圖片的位置（在下面的狀態欄有坐標，得到的坐標前面加上一個負號），圖片左上角為x/y對應的0/0， background-image：相對地址指定背景圖像， background-position：指定背景圖像位置， 下面是例子，這個要多練習研究就會了。多看看CSS方面的說明 .icon {background-image: url(back_image.png)} .head {height: 26px; background-position: -42px -222px; background-repeat: no-repeat;} .btn {cursor:pointer; border:0; width: 107px; height: 26px; background-image: url(back_image.png); background-position: -42px -222px; background-repeat: no-repeat;} <div style="width: 107px; height: 200px;" <div class="icon head" style="line-height: 26px; padding-left: 20px;"這是頭部</div 這里是內容！</div</div/<input type="button" class="btn" value="按鈕"
⑨ css設置背景圖定位的問題
你查查background-position並練習一下就知道了，背景圖的兩個偏移值可以用background-position:xy;表示。x是水平位置偏移，y是垂直位置偏移。
你可以用坐標來理解，圖片左上角的坐標就是00。如-683px-162px就是：水平偏移683px，垂直偏移162px
具體的數值是根據你圖片來定的，如下圖：黑色的圖片距離左邊30px，距離頂部60px，那麼background-position的兩個值就是-30px -60px
⑩ 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>