背景圖片怎麼定位_請問背景圖片是如何用CSS定位的我指的不是定點陣圖片位置而是定位一張背景圖片中很多圖片中的一個圖片

『壹』 CSS中背景圖片定位怎麼只知道圖片的具體坐標

這個回答起來有點復雜，background-position:right -108px 就是你圖片往左108個像素，這要發揮你的空間相像力，如有兩個十字架，粗細一樣，但長短不一樣，然後短的十字架是固定的，那麼你只有移動大的十字架，才能把兩個十字加相互重合起來，要計算小ICO的位置，公式應該是：-（ico絕對位置-定義對像的絕對位置）

『貳』如何調整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使用圖片做背景，如何精確定點陣圖片位置

根據你的圖片做了下面的樣式，主要做法是定位，切割圖片，可以使用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="按鈕"

『肆』 html中,怎麼把背景圖片置於最低層

1、用css的z-index的屬性就可以實現。首先新建一個html文件，在文件中寫入一個div容器和一個圖片：

『伍』 css 背景圖片的定位

關鍵字, 例如: background-position: top right;
優點: 直觀, 可用性高, 各瀏覽器中表現一致.
缺點: 缺少間隔尺寸. 三個垂直的 (top, center, bottom) 和三個水平的 (left, center, right) 只能為你組合出最多 9 個位置. 不存在其他混式的組合. 並且很難像其他兩種數值定位方法一樣使用算數進行控制
像素, 例如: background-position: 0px 0px;
優點: 概念容易被理解, 只要知道如何測量容器左上角和圖片左上角之間的距離, 就能准確地推測出圖片顯示的位置. 像素還能夠精確的用數學來控制定位.
缺點: 你必須知道確實的值.
原理, 如圖. 其實就是圖片左上角相對於容器左上角的坐標關系.

『陸』 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

『柒』 dw如何將背景圖片放在任意位置

用DW的話，可以通過CSS把背景圖片通過「坐標」設定到「任意」位置。
這個呢，應該是比較好弄的，你在CSS面板裡面找到「背景」，之後再相應的
background-position(x)(和background-position(y)裡面輸入相應的數值（比如100）就好，也可輸入如果「left」、「right」或「center」（分別代表左對齊、右對齊和居中對齊）。
大概就是這樣了，不知道說明白沒有。不行的話，你再HI我好了。

『捌』 css背景圖定位截取

要調整背景圖的渲染尺寸，需要用到background-size這個樣式規則，但這是CSS3新增的，所以目前暫時沒有全兼容的解決方案。

哦，這個意思，那麼如果你貼背景圖的容器高度與背景圖那幾個logo一致，就採用縱向排列圖片，垂直定位的方式；如果容器寬高都比logo尺寸大，那就沒辦法了，再嵌入一個小容器專門顯示這個圖標吧。

『玖』背景圖片如何定位。div 設置 border padding 數值後。定位原點是在padding 左上角開始

結合下面的代碼和圖自己看看

<html>

<head>

<metacharset="utf-8">

<styletype="text/css">

.div1{width:200px;height:200px;background:#f00;padding:50px;border:solid20px#0f0;}

</style>

</head>

<body>

<divclass="div1">

ppppppppp

</div>

</body>

</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 的目的就是通過整合圖片，減少對伺服器的請求數量，從而加快頁面載入速度

導航:首頁 > 動漫圖片 > 背景圖片怎麼定位

背景圖片怎麼定位

與背景圖片怎麼定位相關的資料