怎么把电脑中的图片用到CSS中 请问在CSS中如何调用本地图片？
\u5982\u4f55\u7528HTML\u4ee3\u7801\u5c06\u7535\u8111\u4e2d\u7684\u56fe\u7247\u6dfb\u52a0\u5230\u7f51\u9875\u4e2d\u628a\u56fe\u7247\u590d\u5236\u5230\u548chtml\u6587\u4ef6\u76f8\u540c\u7684\u76ee\u5f55\u4e0b\uff0c\u521b\u5efa\u4e00\u4e2ahtml\u6587\u4ef6\uff0c\u8f93\u5165\uff1a
\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\uff1abody{background-image: url(image.jpg)}\u3002
3\u3001\u6d4f\u89c8\u5668\u8fd0\u884cindex.html\u9875\u9762\uff0c\u6b64\u65f6\u901a\u8fc7\u80cc\u666f\u56fe\u7247\u7684\u672c\u5730\u8def\u5f84\u6210\u529f\u8c03\u7528\u4e86\u672c\u5730\u56fe\u7247\u4f5c\u4e3a\u80cc\u666f\u56fe\u7247\u3002
在css中用background属性，如background：url（图片的路径）；就可以了。
绛旓細缁忚繃澶氭鐨勬祴璇曪紝涓婇潰涓夌鏂规硶閮藉彲浠ヨ鍥剧墖鍜屾枃瀛楀湪鍚屼竴琛屾樉绀猴紝涓嬮潰椹捣绁ュ氨鐢ㄥ疄渚嬫潵涓哄ぇ瀹舵搷浣滀竴涓嬶細 1銆鍦╟ss涓缁檇iv娣诲姞涓娾渧ertical-align:middle鈥濆睘鎬 鏈変簺鏈嬪弸浼氬彂鐜帮紝濡傛灉涓琛屽唴瀹逛腑鏈夊浘鐗囨湁鏂囧瓧鐨勮瘽锛屾枃瀛楀線寰浼氳嚜鍔ㄧ殑搴曢儴瀵归綈锛屽奖鍝嶇編瑙傦紝閭濡備綍璁瀹冧滑鐩稿浜庡瀭鐩村眳涓憿锛屽緢绠鍗曪紝灏辨槸鍦ㄥ浘鐗囧拰鏂...
绛旓細姣斿杩欐槸鍗曠嫭鐨CSS鏂囦欢锛01.css /*鑳屾櫙鍥剧墖*/ body{ background:url(...) no-repeat left top;} 鍦╤tml鏂囦欢閲岋細 鑳屾櫙鍥剧墖 涓讳綋鍐呭
绛旓細 鍥剧墖銆佹枃瀛 涓鑸垜鏄悓杩 璁剧疆 padding锛堣ˉ鐧斤級 margin锛堣竟璺濓級绛夋牱寮忔潵鍦ㄩ〉闈笂鎺掔増锛屾湁涓浜涘氨鏄痯osition 鏄湪鏁翠釜椤甸潰涓婂畾浣 === position : static; /* 鏃犲畾浣 */ position : relative; /* 渚濈墿浠跺乏涓婅涓哄熀鍑嗗彇鐩稿綋浣嶇疆 */ position : absolute; /* 渚濈綉椤靛乏涓婅涓哄熀鍑嗗彇缁濆浣嶇疆 ...
绛旓細 濡傛灉甯屾湜榧犳爣缁忚繃鏃鍥剧墖鐨勫昂瀵稿彉鎴600*450锛岄偅涔鍦╟ss閲岄潰鍙杩欐牱瀹氫箟灏辫浜嗭細.pic img:hover{width:600px;height:450px} 杩欎釜浠ｇ爜鍦╥e6涓嬩細涓嶇敓鏁堬紝鍥犱负ie6涓嶆敮鎸侀櫎A鏍囩澶栫殑鍏朵粬鍏冪礌鐨:hover浼被銆傚鏋滆鍦╥e6涓嬪吋瀹癸紝鍙渶瑕佹妸div鏀规垚a鏍囩锛屼篃灏辨槸鍦ㄥ浘鐗囦笂鍔犱竴涓秴閾炬帴锛岀劧鍚庣粰瀹冨姞涓婁竴涓...
绛旓細height:300px; overflow:hidden; } 杩欐浠ｇ爜浣犺瘯璇曠湅锛屽湪div涓畬鍏ㄦ病鏈夋坊鍔鍥剧墖鏍囩锛岃屾槸鏍规嵁css涓殑background灞炴х粰div娣诲姞涓寮犲浘鐗囦綔涓鸿儗鏅傝繖鏍峰仛鐨勫ソ澶勬槸鍏佽鍦ㄥ悓涓涓猟iv涓敤hover鏉ュ疄鐜板浘鐗囩殑榧犳爣鍝嶅簲鍒囨崲锛屽潖澶勫氨鏄棤娉曡皟鏁村浘鐗囩殑澶у皬銆
绛旓細CSS鏄剧ず涓涓ぇ鍥剧墖涓殑澶氫釜灏忓浘鏍囷紝涓昏鏄敤background-position杩欎釜灞炴ф潵鎺у埗鐨勩傚厛鐪嬩笅闈㈣繖寮300*300鐨勫ぇ鍥剧墖锛屾瘡涓皬鍥炬爣鏄100*100鐨勩(杩欏紶鍥剧墖鍚嶅瓧鍙9pic2.jpg)棣栧厛鍏堝皢浣犺鏀剧疆鑳屾櫙灏忓浘鏍囩殑鍏冪礌鐨勫ぇ灏忚缃垚鍥剧墖閲鍥炬爣鐨勫疄闄呭ぇ灏忥紝鐢╳idth鍜宧eight璁剧疆锛岀劧鍚庣敤background-image鎶婅儗鏅浘鐗囨斁杩涘幓锛...
绛旓細CSS鏄剧ず涓涓ぇ鍥剧墖涓殑澶氫釜灏忓浘鏍囷紝涓昏鏄敤background-position杩欎釜灞炴ф潵鎺у埗鐨勩傞鍏堝厛灏嗘斁缃儗鏅皬鍥炬爣鐨勫厓绱犵殑澶у皬璁剧疆鎴鍥剧墖閲鍥炬爣鐨勫疄闄呭ぇ灏忥紝鐢╳idth鍜宧eight璁剧疆锛岀劧鍚庣敤background-image鎶婅儗鏅浘鐗囨斁杩涘幓锛屾瘮濡傦細.showImage{ background-image: url(9pic2.jpg);width: 100px;height: 100px;} ...
绛旓細鍙互鐢css3涓鈥渢ransform: scale()鈥濆睘鎬у鍥剧墖杩涜缂╂斁銆1銆佹柊寤篽tml鏂囨。锛屽湪body鏍囩涓坊鍔犱竴寮犲浘鐗囷紝缁欒繖寮犲浘鐗囪缃甤ss灞炴э紝娣诲姞鈥渢ansform鈥濈缉鏀惧睘鎬э紝灞炴у间负鈥渟caleX(n)鈥濓紝scaleX(n)鎸囩殑鏄瀹藉害杩涜缂╂斁锛宯鎸囩殑鏄缉鏀炬瘮渚嬶細2銆佸皢transform鐨勫睘鎬у兼敼涓衡渟caleY(n)鈥濓紝scaleY(n)鎸囩殑鏄...
绛旓細鍦╤tml鍜宑ss闃舵锛岄氬父鍙互浣跨敤涓ょ鏂瑰紡鏉ユ坊鍔鍥剧墖銆傚嵆浣跨敤html鏍囩寮曞叆鍥剧墖鍜浣跨敤css涓殑background灞炴ф坊鍔犺儗鏅浘銆備笅闈㈠杩欎袱绉嶆柟寮忓仛涓畝鍗曠殑浠嬬粛宀╄京娲俱備竴銆佷娇鐢ㄣ恑mg/銆戝厓绱犲紩鍏ュ浘鐗 鍙互浣跨敤銆恑mg/銆戣繖涓厓绱犲紩鍏ュ浘鐗囷紝杩欐槸涓涓鍐呭厓绱狅紝浣嗘槸鍏锋湁琛屽唴鍧楃殑灞炴э紝鍙互鑷璁剧疆楂樺害鍜屽搴︺傘恑mg src...
绛旓細闇瑕佸噯澶囩殑鏉愭枡鍒嗗埆鏈夛細鐢佃剳銆佹祻瑙堝櫒銆乭tml缂栬緫鍣ㄣ1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html銆2銆佸叾娆★紝鍦╥ndex.html涓殑鏍囩涓紝杈撳叆css浠ｇ爜锛歞iv{border: 1px solid blue; text-align: center}銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃鍥剧墖鍦ㄧ洅瀛愪腑鏄眳涓樉绀虹殑銆
