问,CSS如何指定本地图片做背景?
CSS\u5982\u4f55\u8bbe\u7f6e\u672c\u5730\u56fe\u7247\u4f5c\u4e3a\u7f51\u9875\u80cc\u666f\uff1f\u8981\u628aImages\u6587\u4ef6\u5939\u548c\u4f60\u7684.html\u6587\u4ef6\u653e\u5728\u4e00\u4e2a\u6587\u4ef6\u5939\u4e0b\u9762\uff0c\u6bd4\u5982\u90fd\u653e\u5728public\u4e0b\u9762\uff0c\u8fd9\u6837\u7684\u8bdd\uff0c\u8def\u5f84\u5c31\u53ef\u4ee5\u5199\u6210background-image:url(/images/abc.jpg);\u6216\u8005background-image:url(../images/abc.jpg);
\u5168\u90e8\u7b80\u5199
body {background:url(\u672c\u5730\u6587\u4ef6\u8def\u5f84\u540d/\u56fe\u7247\u540d\u79f0) no-repeat;}
no-repeat;\u4e0d\u91cd\u590d
no-repeat left top;\u4e0d\u91cd\u590d\u4e8e\u76d2\u5b50\u5de6\u4e0a\u65b9
no-repeat right top;\u4e0d\u91cd\u590d\u4e8e\u76d2\u5b50\u53f3\u4e0a\u65b9
no-repeat right bottom;\u4e0d\u91cd\u590d\u4e8e\u76d2\u5b50\u53f3\u4e0b\u65b9
repeat-x;\u6a2a\u5411\u5e73\u94fa
repeat-x bottom;\u6a2a\u5411\u5e73\u94fa\u76d2\u5b50\u5e95\u90e8
repeat-y;\u7eb5\u5411\u5e73\u94fa
比如：body{
background-image : url(e:/pic/live_s.jpg);
}
opera支持css3,所以可以用更多的控制,比如-o-background-size: 100% 126px;但是本地图片似乎不能用,除非你在本地建个服务器,然后用localhost/aa.jpg这种形式.
绛旓細妤间富浣犲ソ锛佸叧浜css鑳屾櫙鍥剧墖锛鏈変互涓嬪嚑鐐硅娉ㄦ剰鐨勫湴鏂 涓句釜css鐨勪緥瀛愬惂 .example{width:200px;height:200px;background:url(鎮ㄧ殑鍥剧墖鍦板潃) no-repeat left bottom;} 鍦ㄦ鏍峰紡涓紝棣栧厛灞傚ぇ灏忔槸200X200鎵浠ヨ儗鏅浘鐗囨樉绀哄嚭鏉ョ殑閮ㄥ垎涔熷彧鏈夎繖涓昂瀵;鍏舵锛岃儗鏅浘鐗囩殑鏍峰紡涓篵ackground,褰撶劧杩樻湁鍒殑鍐欐硶锛屽back...
绛旓細1銆侀鍏堟墦寮鍓嶇寮鍙戝伐鍏凤紝鏂板缓涓涓猦tml浠ｇ爜椤甸潰銆2銆佸湪html浠ｇ爜椤甸潰涓婂垱寤轰竴涓敤浜庤缃儗鏅鑹茬殑div鏍囩锛岀劧鍚庣粰杩欎釜鏍囩娣诲姞涓奵lass = "bg-img"銆3銆佽缃儗鏅鍥剧墖銆傚垱寤簊tyle鏍囩锛岀劧鍚庡湪鏍囩閲岄潰瀵圭被涓篵g-img璁剧疆鑳屾櫙鍥剧墖銆佸浘鐗囦笉閲嶅銆佸銆侀珮鐨勬牱寮忋4銆佷繚瀛榟tml浠ｇ爜锛屼娇鐢ㄦ祻瑙堝櫒鎵撳紑锛岃繖涓椂鍊欎細...
绛旓細鍙互杩欐牱 鏀句袱涓眰 澶栭潰涓涓眰 閲岄潰鍦ㄥ寘涓涓眰 閲岄潰杩欎釜灞傚氨鏀鍥剧墖 background:url("xxx") no-repeat;骞朵笖灞傚眳涓 margin:0px auto;澶栭潰杩欎釜灞傝儗鏅氨璁剧疆鍏ㄥ眬鐨勯鑹 璁剧疆鎴愯窡 閭ｅ紶鍥 寰堝鍚堢殑棰滆壊灏眔k
绛旓細浜斻佸湪size鐩稿悓鐨CSS Sprites鍥剧墖涓紝鍨傜洿鎺掑垪鐨勫浘鐗囦細姣旀按骞虫帓鍒楃殑鏂囦欢浣撶Н瑕佸ぇ銆傚叚銆佸湪CSS Sprites鍥剧墖涓紝姘村钩鎺掑垪鐨勫浘鐗囦細姣斿瀭鐩存帓鍒楃殑鏂囦欢浣撶Н瑕佸ぇ銆備竷銆佸浘鐗囧绛夊悎骞讹細搴旂敤CSS Sprites鍥剧墖鏃讹紝閫傚綋鍦版妸瀵圭瓑鐩稿悓鐨鍥惧儚鍚堝苟锛屼互鑺傜渷绌洪棿鍙婂噺灏戜綋绉傚叓銆佸尯鍒嗗紑涓嶉渶瑕佸悎骞剁殑鍥惧儚锛氬褰撳墠鐢ㄦ埛纭畾鍙樉绀轰竴...
绛旓細濡備綍鍦╤tml涓坊鍔犺儗鏅鍥剧墖 鍦╤tml涓粰div娣诲姞鑳屾櫙鍥剧墖涓昏鏈変互涓嬪嚑绉嶆柟娉:绗竴涓:缁檆ss鏂囦欢娣诲姞鑳屾櫙鍥剧墖:浣跨敤url(../images/鑳屾櫙鍥剧墖2.jpg)鍦css涓紝鐢变簬html鏂囦欢鍜宑ss鏂囦欢鐨勭浉瀵逛綅缃笉鍚岋紝鍐呰仈css鍜屽鍏ss涓紩鍏ュ浘鐗囩殑璺緞浼氭湁鎵涓嶅悓銆傚鍥炬墍绀:绗簩:浠嬬粛:濡傚浘鎵绀:绗笁绉:鍦╠iv涓坊鍔犲浘鐗囥俰mg ...
绛旓細IMG娣诲姞鑳屾櫙鏍峰紡涓嶆槸鎵鏈夋祻瑙堝櫒鏀寔鐨勶紝鍞竴鐨勫姙娉曟槸澶栭潰濂椾釜div鏍囩锛岀劧鍚巇iv鏍囩璁剧疆鑳屾櫙棰滆壊銆備絾鏄綘瑕佹敞鎰忥紝PNG鍥剧墖鐨勫崐閫忔槑鏁堟灉IE6鏄樉绀轰笉浜嗙殑锛屽彧鏄剧ず涓寮犵函鑹插浘鐗囥
绛旓細鑳屾櫙鍥炬槸鍦℉TML妯″紡涓嬫妸浠ヤ笅浠ｇ爜鍔犲埌宸叉湁浠ｇ爜鏈鍓嶉潰锛 娉細鍥剧墖鍦板潃蹇呴』鏄綉缁滀笂宸叉湁鐨鍥剧墖锛涓嶆槸鏈湴鏈虹殑锛屽鏋滆閾炬帴鏈湴鏈虹殑锛屽繀鍏堝湪鐩稿唽鎴栬呭叾浠栨枃绔犱笂浼犱箣鍚庢墠鍙互璋冪敤銆傛柟娉曚簲锛<STYLE TYPE="text/css"> <!-- BODY {background-image: URL(鍥剧墖鍚嶇О.gif);background-position: center;backgro...
绛旓細background-attachment: 銆呫; ( 璇疯嚜琛屽甫鍏 )scroll: 鑳屾櫙鍥剧墖闅忕潃椤甸潰婊氬姩鑰屾粴鍔 fixed: 鑳屾櫙鍥剧墖涓嶄細闅忕潃椤甸潰婊氬姩鑰屾粴鍔 local: 鑳屾櫙鍥剧墖浼氶殢鐫鍏冪礌鍐呭婊氬姩鑰屾粴鍔 initial: 璺熼殢榛樿鍊 inherit: 缁ф壙鐖剁骇鏍峰紡
绛旓細璁剧疆鑳屾櫙鍥剧墖鐨CSS灞炴ф槸鍍忚繖鏍风殑锛歜ackground-image: url(./images/background.jpg);url鏄竴涓狢SS鍑芥暟锛岄噷闈㈠弬鏁版槸鍥剧墖鐨勭洰褰曡矾寰勩備竴鑸噰鐢ㄧ浉瀵圭洰褰曡矾寰勶紝涔熷氨鏄亣璁緄ndex.html瀛樻斁鍦ㄥ摢涓涓洰褰曚笅锛屽垯鍦ㄨ繖涓洰褰曚笅鍒涘缓涓涓猧mages鐩綍锛屽皢background.jpg鏂囦欢鏀惧埌images鐩綍閲岄潰鍘汇備慨鏀css鏂囦欢鐨刡ody鐨勬牱寮...
绛旓細 body{ background-image:url(浣犵殑鍥剧墖鍦板潃);background-position:center;background-repeat:repeat-y锛泒 2銆佸叾涓紝 background-image:url(浣犵殑鍥剧墖鍦板潃)琛ㄧず鑳屾櫙鍥剧墖鐨勫瓨鏀捐矾寰勶紱background-position:琛ㄧず鐨勬槸鑳屾櫙鍥剧墖鐨勪綅缃紝涓昏鏈塼op(涓)銆乥ottom锛堜笅锛夈乴eft(宸)銆乺ight(鍙)杩欏洓涓彇鍊硷紱backgrou...
