在html代码中怎么让背景图片居中 在html代码中怎么让背景图片居中
\u5728html\u4ee3\u7801\u4e2d\u600e\u4e48\u8ba9\u80cc\u666f\u56fe\u7247\u5c45\u4e2d\u76f4\u63a5\u7528no-repeat\u5c31\u53ef\u4ee5\u4e86
body{background:url(http//:\u56fe\u7247\u4f4d\u7f6e) \u53c2\u6570} /*\u53ef\u8bc6\u522b\u7684\u56fe\u7247\u683c\u5f0f\u4e3ajpg\u3001gif\u3001bmp\u7b49*/
\u4e3b\u8981\u53c2\u6570\uff1a
repeat \uff1a\u80cc\u666f\u56fe\u50cf\u5728\u7eb5\u5411\u548c\u6a2a\u5411\u4e0a\u5e73\u94fa
no-repeat\uff1a\u80cc\u666f\u56fe\u50cf\u4e0d\u5e73\u94fa
repeat-x \uff1a\u80cc\u666f\u56fe\u50cf\u5728\u6a2a\u5411\u4e0a\u5e73\u94fa
repeat-y \uff1a\u80cc\u666f\u56fe\u50cf\u5728\u7eb5\u5411\u5e73\u94fa
\u5b9e\u4f8b
background: #0066cc url(\u56fe\u7247) no-repeat fixed center;
\u6216
top right \u8868\u793a\u56fe\u7247\u4e0e\u6d4f\u89c8\u5668\u7684\u9876\u8fb9\u548c\u53f3\u8fb9\u5bf9\u9f50
bottom left \u8868\u793a\u56fe\u7247\u4e0e\u6d4f\u89c8\u5668\u7684\u5e95\u8fb9\u548c\u5de6\u8fb9\u5bf9\u9f50
\u5728\u80cc\u666f\u6240\u5728\u7684\u8868\u683c\u6216\u8005DIV\u4e2d\uff0c\u8bbe\u7f6e\u6837\u5f0f\uff1astyle="background-image:\u56fe\u7247\u5730\u5740;
background-position:center;
background-repeat:no-repeat;"
\u641e\u5b9a\uff01
\u795d\u4f60\u6210\u529f\uff0c\u671b\u91c7\u7eb3\uff01
用background-position属性来实现。
参考代码：
<html>
<head>
<style type="text/css">
body
{
background-image:url(/i/eg_bg_desert.jpg);'背景图
background-position: center center ; '居中
background-repeat:no-repeat;'图片不重复
}
</style>
</head>
<body>
</body>
</html>
纯粹的背景图居中，不考虑是否填满区域的话，可以用background-position:center center;
考虑到要填满整个区域，可以使用background-size:cover
background-size:cover;
绛旓細绗竴涓:缁檆ss鏂囦欢娣诲姞鑳屾櫙鍥剧墖:浣跨敤url(../images/鑳屾櫙鍥剧墖2.jpg)鍦╟ss涓锛岀敱浜巋tml鏂囦欢鍜宑ss鏂囦欢鐨勭浉瀵逛綅缃笉鍚岋紝鍐呰仈css鍜屽鍏ss涓紩鍏ュ浘鐗囩殑璺緞浼氭湁鎵涓嶅悓銆傚鍥炬墍绀:绗簩:浠嬬粛:濡傚浘鎵绀:绗笁绉:鍦╠iv涓坊鍔犲浘鐗囥俰mg src=../images/鑳屾櫙鍥1.jpgalt=style=width:100%;height:100%>韬珮:10...
绛旓細鍏蜂綋姝ラ濡備笅锛1.鎻掑叆鑳屾櫙鍥剧墖鏈変袱绉嶆柟娉曪紝涓绉嶆槸鐢╤tml鐨刬mg鏍囩锛屽彟涓绉嶆槸鍒╃敤css鐨刡ackground鏍囩鎻掑叆銆傚叿浣撴搷浣滄槸棣栧厛鏂板缓涓涓猦tml鏂囦欢锛屽啓鍏ヤ袱涓猟iv锛屽垎鍒敤鏉ユ紨绀轰袱绉嶆柟娉曟彃鍏ユ爣绛;2.棣栧厛鏄敤html鏍囩鎻掑叆鍥剧墖锛岃繖閲岀洿鎺ュ湪img鏍囩涓娇鐢╯rc灞炴у氨鍙互鎻掑叆鍥剧墖璺緞灏辨垚鍔熶簡;3.鎺ョ潃鏄敤css鎻掑叆锛屽湪div...
绛旓細鍙互閫夋嫨鍦ㄨ璁℃ā寮忎笅锛屽湪鑿滃崟鏍忎腑閫夋嫨-鎻掑叆-鍥剧墖锛岄夋嫨鍥剧墖鍗冲彲 濡傛灉鍐檋tml浠ｇ爜锛岄偅鍦ㄦ兂鎻掑叆鍥剧墖鐨勫湴鏂逛腑鍔狅細<img src="鍥剧墖鐨勮矾寰" /> <html><head></head><body><img src='b.jpg'/></body>
绛旓細缁欎綘涓畝鍗曠殑浠ｇ爜<html<head<title鏀鑳屾櫙棰滆壊</title</head<body bgcolor=rrggbb鏀硅儗鏅鑹</body</html鏀硅儗鏅鑹茬殑閭ｄ釜浠ｇ爜鏄細<body bgcolor=rrggbb
绛旓細1銆佹墦寮HBuilderX杞欢銆2銆佽繘鍏ュ悗鏂板缓涓涓猦tml鏂囦欢銆3銆佸懡鍚嶄负鑳屾櫙鍥剧墖鐐瑰嚮鍒涘缓銆4銆佺劧鍚庡湪鍚屼竴鏂囦欢澶逛腑鏀惧叆涓寮犺儗鏅浘鐗銆5銆佺劧鍚庡湪head涓紪鍐檚tyle鏍峰紡锛屽鍥炬墍绀恒6銆佹寜ctrl+s淇濆瓨锛岀劧鍚庣偣鍑讳笂鏂硅棰戝浘鏍囷紝閫夋嫨娴忚鍣ㄨ繘琛岃繍琛屽嵆鍙7銆佹晥鏋滃鍥炬墍绀猴紝鏈缃钩閾烘柟寮忕殑鎯呭喌涓洪粯璁ゆ按骞崇珫鐩村钩閾恒8銆佷笉鎯...
绛旓細1銆佽缃鑳屾櫙鍥剧墖鍙渶鍦╟ss鏍峰紡涓缃産ackgroud-image灞炴э細<style type="text/css" > body{ background-image:url(浣犵殑鍥剧墖鍦板潃);background-position:center;background-repeat:repeat-y锛泒 </style> 2銆佸叾涓紝 background-image:url(浣犵殑鍥剧墖鍦板潃)琛ㄧず鑳屾櫙鍥剧墖鐨勫瓨鏀捐矾寰勶紱background-position:琛ㄧず鐨...
绛旓細1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html銆2銆佸皢index.html涓鐨<body>鏍囩鐨浠ｇ爜鏇挎崲涓猴細<body style="background: url(image.jpg)"> <audio autoplay loop src="11704.mp3"></audio> </body> 3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃跺彂鐜伴〉闈㈠浜鑳屾櫙鍥剧墖鍜岃儗鏅煶涔愩
绛旓細html涓璁剧疆鍏冪礌鐨勮儗鏅壊閮芥槸閫氳繃CSS涓殑background 灞炴ф潵瀹屾垚銆備緥濡傦紝缁欐暣涓〉闈紙body锛夎缃儗鏅壊锛歜ody{background: #ddd;}锛涘鏋滆灏嗗浘鐗囦綔涓鸿儗鏅壊锛歜ody{background-image: url(1.jpg);}锛屽叾涓璾rl鎷彿鍚庨潰鐨勬槸鑳屾櫙鍥剧墖鐨勯摼鎺ャ
绛旓細1銆佷互Hbuilder鏉ヨ瑙ｏ紝棣栧厛鏂板缓涓涓HTML椤甸潰锛屽鍥撅紱2銆佹帴鐫缁欐爣绛捐缃鑳屾櫙鍥剧墖锛屽鍥捐缃殑鏄<body>鏍囩锛3銆佺劧鍚庢柊寤轰竴涓猚ss鏂囦欢锛屽鍥撅紱4銆佽繖閲岀粰body鏍囩璁剧疆background-size灞炴э紝濡傛灉鏍囩鏄痙iv灏卞啓div锛岀劧鍚庡彲浠ヨ缃搴﹀拰楂樺害锛5銆佸鍥炬墍绀猴紝鍦╪ew_file.html閲岄潰缂栬緫锛<link href="css/1.css" ...
绛旓細鐢―reamweaver杞欢缂栬緫 涓銆佹墦寮Dreamweaver,鐒跺悗閫変腑html,鍑烘潵浜嗕竴涓猦tml鏍囧噯鏂囨。銆備簩銆佸湪鏍囩閲屾坊鍔犳枃浠惰矾寰勶紝璇硶濡備笅锛氳繖鏃讹紝椤甸潰铏界劧鍏呮弧浜嗚儗鏅紝浣嗗彲浠ョ湅鍑鑳屾櫙鍥剧墖琚～鍏呬簡澶氭銆備笁銆佸湪閲屾坊鍔犳牱寮忥紝浠ｇ爜濡備笅锛氫綘鐪嬶紝鑳屾櫙灏卞厖婊￠〉闈簡銆
