css圖片怎麼定位_如何用css使一個用絕對定位的圖片定位在網頁一個具體位置

❶ 請問背景圖片是如何用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使用圖片做背景，如何精確定點陣圖片位置

根據你的圖片做了下面的樣式，主要做法是定位，切割圖片，可以使用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給網頁中的元素（圖片、文字等）定位

<div> 圖片、文字 </div>
一般我是同過設置 padding（補白） margin（邊距）等樣式來在頁面上排版，
有一些就是position 是在整個頁面上定位
=================================
position : static; /* 無定位 */
position : relative; /* 依物件左上角為基準取相當位置 */
position : absolute; /* 依網頁左上角為基準取絕對位置 */
position : fixed; /* 固定位置不受滾動條影響 */
===================================
設置了position屬性然後直接｛top:100px;｝還可以用margin-top:-100px;
margin在設置了position 後可以為負值例如「-100px;
」

❹ 如何用css使一個用絕對定位的圖片定位在網頁一個具體位置,不隨網頁大小等改變位置!

需要准備的材料分別有：電腦、瀏覽器、html編輯器。

1、首先，打開html編輯器，新建html文件，例如：index.html。

❺ css 背景圖片的定位

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

❻ 怎麼用CSS設置圖片的位置。

用Css設置圖片的位置的話：
1.通過position的絕對定位，然後在通過left和top就可以設置你的圖片位置了；代碼如下

<div style='position:absolut; left:0px; top:0px'>
<img src='圖片地址'>

</div>

2.通過div+css的布局來實現給定一個包裹圖片的div默認位置就行，代碼如下
<div>

<div style='flaot:left; width:330px; height:200px;'>
<p>我是左邊的</p>

</div>

<div style='flaot:left; width:330px; height:200px;'>
<img src='圖片地址'>
</div>
</div>

❼ css如何將圖像定位在左下角

這要使用到css中的position:absolute;絕對定位。示例代碼如下：

img{position:absolute;left:0;bottom:0;}

這里的意思就是，圖片採用絕對定位的方式，距離左邊0px，距離下邊0px。這樣就到了左下角了。

❽ CSS如何定點陣圖像

定位用的最多是相對定位和絕對定位，可以直接把你的具體問題貼出來

❾ css將圖片用相對定位到頁面正中間

最簡單的方法：給圖片單獨套個div，給div做margin設置就好了，設置用百分比，具體如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>圖片居正中間__郭凱旗</title>
<style>
html{height:100%; width:100%}
body{height:100%; width:100%}
.d1{width:300px;
height:200px;
background:red;
position:fixed;
top:50%;
margin-top:-100px;
left:50%;
margin-left:-150px;
}
.d1 img{width:100%;height:100%}
</style>
</head>
<body>
<div class="d1">
<img src="1.jpg"/>
</div>
</body>
</html>

❿ 如何用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圖片怎麼定位

css圖片怎麼定位

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