Ⅰ 求定位背景圖片的CSS代碼
語法：
background-position : length || length
background-position : position || position
參數：
length : 百分數 | 由浮點數字和單位標識符組成的長度值。請參閱長度單位
position : top | center | bottom | left | center | right
說明：
設置或檢索對象的背景圖像位置。必須先指定background-image屬性。默認值為：(0% 0%)。
如果只指定了一個值，該值將用於橫坐標。縱坐標將默認為50%。第二個值將用於縱坐標。
該屬性定位不受對象的補丁屬性(padding)設置影響。
對應的腳本特性為backgroundPosition。請參閱我編寫的其他書目。
示例：
div { background: url("images/aardvark.gif"); background-position: 35% 80%; }
menu { background: url("images/aardvark.gif"); background-position: 35% 2.5cm; }
a { background: url("images/aardvark.gif"); background-position: 3.25in; }
body { background: url("images/aardvark.gif"); background-position: top right; }
Ⅱ css怎麼調整背景圖片的位置
1、首先打開前端開發工具，新建一個html代碼頁面。
Ⅲ 請問背景圖片是如何用CSS定位的我指的不是定點陣圖片位置，而是定位一張背景圖片中很多圖片中的一個圖片
美國YAHOO在頁面製作中所用到的圖片整合技術，這樣做雖然需要花一定的時間來有規則的合並這些ICON，欄目背景，圖片按鈕，以方便CSS調用，但是這樣做絕對是合算的，而且是有必要的，YSlow也是極力推薦的。
實現方法：
首先將小圖片整合到一張大的圖片上，然後根據具體圖標在大圖上的位置，給背景定位。background-position:-8px -95px;
淺談CSS Sprites技術以及圖片優化 〔背景圖整合〕
關於CSS Sprites技術的優化我們能做到多少，能減多少的請求數量。這並且不是單方面能做到的，一切取決於XHTML、CSS、CSS Sprites圖片之間的配合。現時為止沒有絕對優化的做法，這也是我在項目中經常衡量CSS Sprites圖片與XHTML關系，如:《一張背景實現自適應九宮格》，以下總結了圖片切割術與圖象優化的一些方法。
圖片優化
一、對於非動畫的GIF更建議使用PNG8因為它同樣能做到一樣的效果，而且能為你節省10%-30%的文件體積。
二、Photoshop相比起Fireworks，導出同等質量的PNG圖片，體積會稍大。而Fireworks雖然做了相應壓縮優化，但沒有達到最優秀的壓縮。
三、我所知的設計軟體，對於PNG圖片的處理都沒做到最優秀的壓縮，圖片體積還有一定的壓縮空間。可以嘗試使用下面介紹的」圖像優化工具」 做無失真的壓縮優化。
四、圖片體積及尺寸方面，建議體積保持在100K以內(較為符合國情最佳請求SIZE)，size為800px(最佳尺寸)。(從某權威人事中得知，具體無從考證)
CSS Sprites圖片切割術
一、CSS Sprites圖片順序合圖片由上至下、左至右添加。而background-position一般採用數字組合形式定位，這樣能減少維護帶來的不必要麻煩。
二、不建議CSS Sprites圖片中保持一定的間距，因為文件size增大而增加文件體積。
三、CSS Sprites圖片中把顏色較近或相同的組合在一起可以降低顏色數，因為少色數的圖片文件體積會相對的小。
四、size相同的CSS Sprites圖片中留有較大空隙，某程度上多數情況會增大了體積，所以CSS Sprites的圖片不要有空隙。
五、在size相同的CSS Sprites圖片中，垂直排列的圖片會比水平排列的文件體積要大。
六、在CSS Sprites圖片中，水平排列的圖片會比垂直排列的文件體積要大。
七、圖片對等合並：應用CSS Sprites圖片時，適當地把對等相同的圖像合並，以節省空間及減少體積。
八、區分開不需要合並的圖像：如當前用戶確定只顯示一種狀態或一個級別時，不必要把其他的級別或狀態的圖片合並。
九、黃金切割位：在CSS Sprites圖片的最右或左邊為最靈活動位置最適宜擺放文本前的icon，因此不會受到其它CSS Sprites圖片干預，也不需要預留一定的行寬。
相關的圖像優化工具，網上流傳的優化工具繁多常見的如：
ImageMagick、PNGGauntlet、pngcrush、pngrewrite、Optipng、PNGOut等。
眾所周知，減少網站載入時間的最有效的方式之一就是減少網站的HTTP請求數。實現這一目標的一個有效的方法就是通過CSS Sprites——將多個圖片整合到一個圖片中，然後再用CSS來定位。
CSS Sprites 的目的就是通過整合圖片，減少對伺服器的請求數量，從而加快頁面載入速度
Ⅳ css背景圖定位截取
要調整背景圖的渲染尺寸，需要用到background-size這個樣式規則，但這是CSS3新增的，所以目前暫時沒有全兼容的解決方案。
哦，這個意思，那麼如果你貼背景圖的容器高度與背景圖那幾個logo一致，就採用縱向排列圖片，垂直定位的方式；如果容器寬高都比logo尺寸大，那就沒辦法了，再嵌入一個小容器專門顯示這個圖標吧。
Ⅳ 如何用css使一個用絕對定位的圖片定位在網頁一個具體位置,不隨網頁大小等改變位置!
需要准備的材料分別有：電腦、瀏覽器、html編輯器。
1、首先，打開html編輯器，新建html文件，例如：index.html。
Ⅵ css 背景圖片的定位
關鍵字, 例如: background-position: top right;
優點: 直觀, 可用性高, 各瀏覽器中表現一致.
缺點: 缺少間隔尺寸. 三個垂直的 (top, center, bottom) 和三個水平的 (left, center, right) 只能為你組合出最多 9 個位置. 不存在其他混式的組合. 並且很難像其他兩種數值定位方法一樣使用算數進行控制像素, 例如: background-position: 0px 0px;
優點: 概念容易被理解, 只要知道如何測量容器左上角和圖片左上角之間的距離, 就能准確地推測出圖片顯示的位置. 像素還能夠精確的用數學來控制定位.
缺點: 你必須知道確實的值.
原理, 如圖. 其實就是圖片左上角相對於容器左上角的坐標關系.
Ⅶ 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如何使背景圖片水平居中
方法和詳細的操作步驟如下：
1、第一步，打開前端開發工具，然後創建一個新的html代碼頁，見下圖，轉到下面的步驟。
Ⅸ 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:-150px 0px 這句話的意思，在這個圖片的x軸150px處和Y軸0處的交叉點的確定！也就是定位！
定位技術就是把網站的小icon放到一張大的pic裡面通過不同的X、Y的坐標取值，得到不同的pic！
比如阿里巴巴的這個pic http://img.china.alibaba.com/images/homepage/index0906/body-bg.png