如何用css精确定位小图片的位置 CSS怎么定位图片位置？
\u5982\u4f55\u7528css\u4f7f\u4e00\u4e2a\u7528\u7edd\u5bf9\u5b9a\u4f4d\u7684\u56fe\u7247\u5b9a\u4f4d\u5728\u7f51\u9875\u4e00\u4e2a\u5177\u4f53\u4f4d\u7f6e,\u4e0d\u968f\u7f51\u9875\u5927\u5c0f\u7b49\u6539\u53d8\u4f4d\u7f6e!\u9700\u8981\u51c6\u5907\u7684\u6750\u6599\u5206\u522b\u6709\uff1a\u7535\u8111\u3001\u6d4f\u89c8\u5668\u3001html\u7f16\u8f91\u5668\u3002
1\u3001\u9996\u5148\uff0c\u6253\u5f00html\u7f16\u8f91\u5668\uff0c\u65b0\u5efahtml\u6587\u4ef6\uff0c\u4f8b\u5982\uff1aindex.html\u3002
2\u3001\u5728index.html\u4e2d\u7684\u6807\u7b7e\u4e2d\uff0c\u8f93\u5165css\u4ee3\u7801\uff1aimg {position: absolute;top: 100px; left: 200px;}\u3002
3\u3001\u6d4f\u89c8\u5668\u8fd0\u884cindex.html\u9875\u9762\uff0c\u6b64\u65f6\u901a\u8fc7css\u5b9e\u73b0\u4e86\u56fe\u7247\u7684\u7edd\u5bf9\u5b9a\u4f4d\uff0c\u8ddd\u79bb\u5de6\u4fa7100px\uff0c\u9876\u90e8200px\uff0c\u4e0d\u968f\u7f51\u9875\u5927\u5c0f\u800c\u53d8\u5316\u3002
\u8fd9\u662f\u4f7f\u7528\u641c\u7d22\u90a3\u4e2a\u56fe\u7684css\u4ee3\u7801
test
.ico{
display:block;
width:80px;
height:31px;
background:url('load.jpg') no-repeat 0 -240px;
}
如何用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 3涓殑銆宲osition銆嶅睘鎬ф潵鍐冲畾瑕浣跨敤鐨勫畾浣鏂瑰紡銆傚湪杩欏洓绉嶆柟妗堜腑锛岄潤鎬佸拰鐩稿瀹氫綅涓嶄細褰卞搷鏁翠釜鏂囨。鐨勫竷灞锛岃岀粷瀵瑰拰鍥哄畾瀹氫綅浼氫笌鏂囨。鍒嗗紑锛屽洜姝ら〉闈笉浼氫负杩欎袱绉嶇被鍨嬬殑瀹氫綅鍏冪礌淇濈暀绌洪棿銆 鍦ㄩ粯璁ょ姸鎬佷笅锛屾墍鏈夊厓绱犻兘鏄潤鎬佹斁缃殑锛屽嵆...
绛旓細鐢–SS鏍峰紡琛ㄥ湪缃戦〉涓缃鍥剧墖浣嶇疆锛岄鍏堬紝涓鑸兘鏄皢鍥剧墖鍖呰９鍒颁竴涓猟iv涓紝鐒跺悗鍦ㄨ瀹氫竴涓埗绾у厓绱狅紝涓鑸兘鏄洿鎺ラ夋嫨娴忚鍣紝鐪嬪叿浣撹姹傛潵锛屽湪浣跨敤position鐨瀹氫綅鏉ュ仛锛屽position:absoulte; left:10px; top:10px;鎰忔濆氨鏄窛宸﹁竟10涓猵x锛岃窛绂讳笂杈10px;杩欓噷閫氳繃浠ｇ爜鏉ョ悊瑙ｄ笅锛 div1{ //閫氳繃id...
绛旓細澶栬竟璺濓級鏉ュ鍥剧墖鐨浣嶇疆杩涜绉诲姩锛2銆佸彲浠ラ氳繃鑳屾櫙鍥剧墖鏉ュ疄鐜帮細锛圖IV+CSS锛夋柟娉曪細background:url(鍥剧墖閾炬帴) no-repeat(鍙樉绀轰竴娆) 鍥剧墖绉诲姩鐨勪綅缃紙鍙互鏄痩eft/right/top/bopttom锛屽綋鐒朵篃鍙互鐢ㄧ櫨鍒嗘瘮鏉ュ疄鐜帮紝灏辫鐪嬩綘瑕佺Щ鍔ㄧ殑浣嶇疆浜嗭級甯屾湜甯姪鍒颁綘锛佸弬鑰冭祫鏂欙細涓汉鐨勭粡楠岋紝绾睘鎵嬫墦锛屾嫆缁漜opy ...
绛旓細v=31680756.gif">绀轰緥涓仛浜嗕竴涓涓300px锛岄珮涓260px鍍忕礌鐨勫鍣紝鍏朵腑鍥剧墖閫氳繃缁濆瀹氫綅锛屾帶鍒跺叾浣嶄簬瀹瑰櫒鐨勬按骞冲眳涓紝瀹瑰櫒搴曢儴鐨勪綅缃俠ottom:10px;鎺у埗鍥剧墖璺濈搴曢儴10px锛宭eft:50%銆乵argin-left:-60px;鎺у埗鍥剧墖姘村钩灞呬腑銆傚叾涓殑margin-left鐨勫兼牴鎹浘鐗囧搴﹀彉鍖栵紝涓鸿礋鐨勪簩鍒嗕箣涓鍥剧墖瀹藉害銆傛渶缁堟晥鏋滃...
绛旓細鍙互閫氳繃璁剧疆div鐨勮竟璺濓紝娴姩绛夋墜娈
绛旓細"> 鑳屾櫙鍥剧墖bg.png瀹藉害涓1000px;楂樺害涓500px,涓婇潰娴姩涓涓灏忓浘鐗pic.png,浣嶇疆鏄窛涓200px,璺濆乏500px;浣犲彲浠ョ敤table甯冨眬鐨勬柟寮瀹氫綅鍥剧墖
绛旓細鍝堝搱銆傝繖闂鐩存帴Q闂垜灏辨槸浜嗐備寒瀛愩傝繖涓槸css sprite 涔熷氨鍙玞ss绮剧伒 銆乧ss 闆ⅶ銆傚叾瀹炲氨鏄紝棰勫厛鎶婄綉绔欎笂鐢ㄥ埌鐨灏忓浘鐗 鍚堝埌涓寮犲浘鐗囦笂锛屼綋绉弽鑰屼細鍙樺皬锛屼笖鍙互鍑忚交鏈嶅姟鍣ㄨ礋鎷咃紝浣块〉闈㈠姞杞介熷害鏇村揩銆傚叿浣撳疄鐜版柟娉 鍒╃敤css鐨勮儗鏅鍥剧墖瀹氫綅锛屽湪鏌愪釜鏈夌潃鍥哄畾瀹介珮鐨勫鍣ㄥ彧鏄剧ず杩欏紶鍥剧墖鐨涓閮ㄥ垎銆備唬鐮侊細...
绛旓細鐧惧害锛歝ss3 鍙樺舰(浣庣増鏈琲e鍜屽皯閮ㄥ垎娴忚鍣ㄤ笉鏀寔)浣庣増鏈琲e鐨勫疄鐜帮細鍏堟妸鍥剧墖鍦╬s閲岄潰鎷夋枩鍋氬奖瀛愬悗瀛樹负锛歱ng24+鑳屾櫙閫忔槑鏍煎紡锛岀劧鍚庣綉椤甸噷闈鐢╟ssz-index鎺у埗灞傜骇涓婁笅鍏崇郴锛屽苟鐢瀹氫綅鎽嗘斁鍒板悎閫傜殑浣嶇疆銆傚彟澶栦綘杩樿淇涓涓媔e6鐨刾ng24鑳屾櫙涓嶉忔槑鐨勯棶棰樸傜劧鍚庯紝浣犵粰閭ｄ笁涓尗鍜浘鐗囨瘡寮犱竴涓猧d锛 cat1,#...
绛旓細鍍忕礌, 渚嬪: background-position: 0px 0px;浼樼偣: 姒傚康瀹规槗琚悊瑙, 鍙鐭ラ亾濡備綍娴嬮噺瀹瑰櫒宸︿笂瑙掑拰鍥剧墖宸︿笂瑙掍箣闂寸殑璺濈, 灏辫兘鍑嗙‘鍦版帹娴嬪嚭鍥剧墖鏄剧ず鐨勪綅缃. 鍍忕礌杩樿兘澶绮剧‘鐨鐢ㄦ暟瀛︽潵鎺у埗瀹氫綅.缂虹偣: 浣犲繀椤荤煡閬撶‘瀹炵殑鍊.鍘熺悊, 濡傚浘. 鍏跺疄灏辨槸鍥剧墖宸︿笂瑙掔浉瀵逛簬瀹瑰櫒宸︿笂瑙掔殑鍧愭爣鍏崇郴.鐧惧垎姣, 渚嬪: ...
绛旓細杩欐槸浣跨敤鎼滅储閭ｄ釜鍥剧殑css浠ｇ爜 <!DOCTYPE HTML> test .ico{ display:block;width:80px;height:31px;background:url('load.jpg') no-repeat 0 -240px;}
