h5中div属性加载不出背景图片 html中在div中加背景图片
css\u8bbe\u7f6e\u80cc\u666f\u56fe\u7247\u4e0d\u663e\u793a\u95ee\u9898\u4ee3\u7801\u7f16\u5199\u6709\u95ee\u9898\u3002
\u89e3\u51b3\u7684\u65b9\u6cd5\u548c\u8be6\u7ec6\u7684\u64cd\u4f5c\u6b65\u9aa4\u5982\u4e0b\uff1a
1\u3001\u7b2c\u4e00\u6b65\uff0c\u6253\u5f00html\u5f00\u53d1\u8f6f\u4ef6\u5e76\u521b\u5efa\u4e00\u4e2a\u65b0\u7684html\u4ee3\u7801\u9875\u9762\uff0c\u89c1\u4e0b\u56fe\uff0c\u8f6c\u5230\u4e0b\u9762\u7684\u6b65\u9aa4\u3002
2\u3001\u7b2c\u4e00\u6b65\uff0c\u6267\u884c\u5b8c\u4e0a\u9762\u7684\u64cd\u4f5c\u4e4b\u540e\uff0c\u5728html\u4ee3\u7801\u9875\u9762\u7684\u6807\u8bb0\u4e2d\u8f93\u5165\u591a\u884c\u6bb5\u843d\u6587\u672c\uff0c\u5f53\u6d4f\u89c8\u5668\u5728\u79fb\u52a8\u6761\u4e0a\u6eda\u52a8\u65f6\uff0c\u6d4f\u89c8\u5668\u7528\u4e8e\u5728\u67e5\u770b\u56fe\u7247\u65f6\u5728\u6eda\u52a8\u6761\u4e0a\u6eda\u52a8\uff0c\u89c1\u4e0b\u56fe\uff0c\u8f6c\u5230\u4e0b\u9762\u7684\u6b65\u9aa4\u3002
3\u3001\u7b2c\u4e00\u6b65\uff0c\u6267\u884c\u5b8c\u4e0a\u9762\u7684\u64cd\u4f5c\u4e4b\u540e\uff0c\u8bbe\u7f6e\u80cc\u666f\u56fe\u7247\u6837\u5f0f\uff0c\u5728\u53f3\u8fb9\u7684\u6807\u8bb0\u4e4b\u540e\u521b\u5efa\u4e00\u4e2a\u6807\u8bb0\uff0c\u7136\u540e\u5728\u8be5\u6807\u8bb0\u4e2d\u8bbe\u7f6e\u6807\u8bb0\u7684\u80cc\u666f\u56fe\u50cf\uff0c\u5e76\u4e14\u4e0d\u4f1a\u91cd\u590d\u8be5\u80cc\u666f\u56fe\u50cf\uff0c\u89c1\u4e0b\u56fe\uff0c\u8f6c\u5230\u4e0b\u9762\u7684\u6b65\u9aa4\u3002
4\u3001\u7b2c\u4e00\u6b65\uff0c\u6267\u884c\u5b8c\u4e0a\u9762\u7684\u64cd\u4f5c\u4e4b\u540e\uff0c\u4fdd\u5b58html\u4ee3\u7801\uff0c\u4f7f\u7528\u6d4f\u89c8\u5668\u5c06\u5176\u6253\u5f00\uff0c\u8fd9\u65f6\uff0c\u6eda\u52a8\u6d4f\u89c8\u5668\u6eda\u52a8\u6761\uff0c\u53d1\u73b0\u80cc\u666f\u56fe\u50cf\u4e0e\u6d4f\u89c8\u5668\u6eda\u52a8\u6761\u7684\u6eda\u52a8\u4e00\u8d77\u6eda\u52a8\uff0c\u89c1\u4e0b\u56fe\uff0c\u8f6c\u5230\u4e0b\u9762\u7684\u6b65\u9aa4\u3002
5\u3001\u7b2c\u4e00\u6b65\uff0c\u6267\u884c\u5b8c\u4e0a\u9762\u7684\u64cd\u4f5c\u4e4b\u540e\uff0c\u4f7f\u7528\u201cbackground-attachment: fixed\u201d\u8bbe\u7f6e\u4e3a\u4e0d\u4f7f\u7528\u6eda\u52a8\u6761\u6eda\u52a8\u7684\u95ee\u9898\uff0c\u8fd4\u56dehtml\u4ee3\u7801\u9875\u5e76\u6dfb\u52a0\u201cbackground-attachment\uff1a fixed\u201d\u5373\u53ef\uff0c\u89c1\u4e0b\u56fe\u3002\u8fd9\u6837\uff0c\u4ee5\u4e0a\u7684\u95ee\u9898\u5c31\u89e3\u51b3\u4e86\u3002
html\u5728div\u52a0\u80cc\u666f\u56fe\u7247\u7684\u5177\u4f53\u64cd\u4f5c\u6b65\u9aa4\u5982\u4e0b\uff1a
1\u3001\u65b0\u5efa\u4e00\u4e2ahtml\u6587\u6863\uff0c\u7f16\u5199\u4e00\u4e2a\u7c7b\u540d\u7b49\u4e8esetbg\u7684div\u6807\u7b7e\u3002
2\u3001div\u5199\u4e0a\u6837\u5f0f\uff0c\u201cbackground: url(bg_main.jpg)\uff1b\u201d\u7684\u6837\u5f0f\uff0c\u8bbe\u7f6e\u80cc\u666f\u56fe\u5373\u53ef\u3002
3\u3001\u8bbe\u7f6e\u4e86\u80cc\u666f\u56fe\uff0c\u7ed9div\u8bbe\u7f6e\u9ad8\u5ea6\u201cheight\uff1a500px\u201d\u3002
4\u3001\u8bbe\u7f6e\u9ad8\u5ea6\u4e4b\u540e\uff0c\u9ad8\u5ea6\u548c\u80cc\u666f\u56fe\u5c31\u53ef\u4ee5\u51fa\u73b0\u3002
5\u3001div\u5f88\u591a\u6587\u5b57\uff0c\u8d85\u8fc7\u4e86\u56fa\u5b9a\u9ad8\u5ea6\uff0c\u4f1a\u51fa\u73b0\u80cc\u666f\u4e0d\u4f1a\u5e73\u94fa\u5230\u5e95\u90e8\u3002
6\u3001\u5728\u8bbe\u7f6e\u597d\u7684\u80cc\u666f\u540e\u9762\u52a0\u4e2a \u201crepeat\u201d\uff0c\u5c31\u53ef\u4ee5\u5e73\u94fa\u80cc\u666f\u56fe\u3002
\u3002
图片的链接URL不对，你需要引用绝对路径或同目录的子目录文件应用路径，或将图片转为Base64。
绝对路径（例）
background-image:url(https://zhidao.baidu.com/images/test.jpg)
相对路径（例）
background-image:url(/images/test.jpg)
Base64路径（例）
background-image:url(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)
绛旓細搴旇鏄紦瀛樼殑闂鍙互閫傚綋娓呯悊娴忚鍣ㄧ紦瀛锛屽叾娆℃垜瑙夊緱浣犳棦鐒跺姞涓婁簡鑳屾櫙灏辨病鏈夊繀瑕佸姞棰滆壊浜嗭紝濡傛灉鐪熺殑娌′綔鐢ㄥ缓璁綘鎹竴涓嬪浘鐗囨牸寮忓仛娴嬭瘯 杩樻湁灏辨槸<style>閲屽簲璇ュ姞涓婂睘鎬ype="text/css" 涓涓嬫槸鎴戠殑浠ｇ爜璇蜂緵鍙傝:<style type="text/css"> div{ background: url("easyui/themes/metro-red/imag...
绛旓細鍙兘鍥剧墖鍍忕礌澶珮锛屽唴瀛樺お澶銆傚彲浠ヤ慨鏀逛负JPG鏍煎紡锛屾垨鑰呭帇缂╂櫘閫氬儚绱犮傛湇鍔″櫒鎴栬櫄鎷熶富鏈洪厤缃お浣庛傚崌绾PU鍜屽甫瀹姐
绛旓細3銆佺涓姝ワ紝鎵ц瀹屼笂闈㈢殑鎿嶄綔涔嬪悗锛岃缃鑳屾櫙鍥剧墖鏍峰紡锛屽湪鍙宠竟鐨<title>鏍囪涔嬪悗鍒涘缓涓涓<style>鏍囪锛岀劧鍚庡湪璇ユ爣璁颁腑璁剧疆<body>鏍囪鐨鑳屾櫙鍥惧儚锛屽苟涓斾笉浼氶噸澶嶈鑳屾櫙鍥惧儚锛岃涓嬪浘锛岃浆鍒颁笅闈㈢殑姝ラ銆4銆佺涓姝ワ紝鎵ц瀹屼笂闈㈢殑鎿嶄綔涔嬪悗锛屼繚瀛榟tml浠ｇ爜锛屼娇鐢ㄦ祻瑙堝櫒灏嗗叾鎵撳紑锛岃繖鏃讹紝婊氬姩娴忚鍣ㄦ粴鍔ㄦ潯锛屽彂鐜拌儗鏅...
绛旓細棰樹富鏄惁鎯宠闂渨ebgl鐨刬ndex.html涓嶈兘鍔犺浇鑳屾櫙鍥剧墖鏄粈涔堝師鍥犫濓紵鍔犺浇璺緞閿欒銆傚綋webgl鐨刬ndex.html涓嶈兘鍔犺浇鑳屾櫙鍥剧墖鏃讹紝鏄敱浜庡姞杞借矾寰勯敊璇鑷寸殑webgl鐨刬ndex.html涓嶈兘鍔犺浇鑳屾櫙鍥剧墖锛屾洿鏀规纭殑鍔犺浇璺緞灏卞彲浠ヨВ鍐炽
绛旓細1銆佹彃鍏鑳屾櫙鍥剧墖鏈変袱绉嶆柟娉曪紝涓绉嶆槸鐢╤tml鐨刬mg鏍囩锛屽彟涓绉嶆槸鍒╃敤css鐨刡ackground鏍囩鎻掑叆銆傚叿浣撴搷浣滄槸棣栧厛鏂板缓涓涓猦tml鏂囦欢锛屽啓鍏ヤ袱涓div锛屽垎鍒敤鏉ユ紨绀轰袱绉嶆柟娉曟彃鍏ユ爣绛撅細2銆侀鍏堟槸鐢╤tml鏍囩鎻掑叆鍥剧墖锛岃繖閲岀洿鎺ュ湪img鏍囩涓娇鐢╯rc灞炴灏卞彲浠ユ彃鍏ュ浘鐗囪矾寰勫氨鎴愬姛浜嗭細3銆佹帴鐫鏄敤css鎻掑叆锛屽湪div涓缃甤lass...
绛旓細background: url('../images/HTML5-瀛﹀爞.jpg')绗3锛屼綘鐨勮矾寰勪笉瑕佸啓閿欙紝鍦ㄨ胺姝屾垨鑰呭叾浠栨祻瑙堝櫒褰撲腑锛岀偣鍑籉12閿紝璋冨嚭鎺у埗鍙帮紝鏌ョ湅鏄惁鏈夐敊璇紝濡傛灉鏈夋枃浠舵病鏈鍔犺浇鎴愬姛锛屽垯璇存槑浣犵殑鐩稿簲鏂囦欢娌℃湁鎴愬姛寮曞叆 绗4锛宐ody褰撲腑闇瑕佹湁鍐呭锛岄粯璁ody鐨勯珮搴︽槸鐢卞唴瀹规拺寮鐨勶紝娌℃湁鍐呭body灏辨病鏈夐珮搴︼紝鑳屾櫙鍥鑷劧鏃犳硶...
绛旓細1銆佹墦寮html寮鍙戣蒋浠讹紝鏂板缓涓涓猦tml浠ｇ爜椤甸潰銆2銆佸湪html浠ｇ爜椤甸潰鐨<body>鏍囩閲岄潰杈撳叆澶氳娈佃惤鏂囧瓧锛岀敤浜庡悗闈㈡祻瑙堝櫒婊氬姩鏉℃粴鍔ㄧ殑鏃跺欐煡鐪嬪浘鐗囨椂鍊欓殢婊氬姩鏉¤屾粴鍔ㄦ潯銆3銆佽缃鑳屾櫙鍥剧墖鏍峰紡銆傚湪<title>鏍囩鍚庨潰鍒涘缓涓涓<style>鏍囩锛岀劧鍚庡湪杩欎釜鏍囩閲岃缃<body>鏍囩鐨勮儗鏅浘鐗囷紝浠ュ強鑳屾櫙鍥剧墖涓嶉噸澶嶃4銆佷繚瀛...
绛旓細1銆佹墦寮HBuilder锛2銆佹柊寤篽tml椤圭洰銆3銆佽缃枃浠跺悕锛岀偣鍑烩滃畬鎴愨濄4銆佸皢鑳屾櫙鍥鎷栧姩鍒癏builder宸ョ▼鐨刬mg鏂囦欢澶广5銆佺偣鍑烩滅‘瀹氣濄6銆佹壘鍒<body></body>銆7銆佸皢<body>鏀规垚<bodybackground="img/鑳屾櫙1.jpg">銆傚叾涓渋mg/鑳屾櫙1.jpg鈥濅负鑳屾櫙鍥捐矾寰勩8銆佺劧鍚庝繚瀛樻枃妗ｃ9銆佺偣鍑烩滆繍琛屸濋夋嫨娴忚鍣...
绛旓細1銆鍥剧墖鍜岀綉椤垫斁鍦ㄥ悓涓鐩綍涓嬶細background-image:url("鍥剧墖.jpg"銆2銆佸浘鐗囨斁鍦ㄤ竴涓猧mage鐩綍涓嬶紝骞朵笖image鐩綍鍜岀綉椤靛湪鍚屼竴鐩綍涓嬶細background-image:url(鈥渋mage/鍥剧墖.jpg鈥)銆3銆佸浘鐗囨斁鍦ㄤ竴涓猧mage鐩綍涓嬶紝骞朵笖image鐩綍鍜岀綉椤典笉鍦ㄥ悓涓鐩綍涓嬶細background-image:url(鈥../image/鍥剧墖.jpg鈥)//涓や釜...
绛旓細棣栧厛鑳屾櫙鍥剧墖涓瀹氭槸鍦ㄨ儗鏅鑹蹭笂闈㈢殑锛岃岃儗鏅浘鐗囦竴瀹氭槸鍦ㄥ唴瀹逛笅闈㈢殑銆傝涓嶇劧灏变笉浼氬彨鍋氳儗鏅簡銆備絾鏄綘杩欐牱鐨勯渶姹備篃鏄彲浠ュ仛鐨勩傞鍏堜綘璁剧疆涓涓div,鏍规嵁鏍瑰厓绱犺繘琛屽畾浣嶏紝width锛100%;height:100%;position: absolute锛泃op锛0锛沴eft锛0;z-index:999; 鐒跺悗鍦ㄩ噷闈㈡斁鍥剧墖锛岃缃甦isplay:block;width:100%;...
