怎么在html里面插入图片？ html里怎么插入背景图片？？急
\u600e\u4e48\u5728html\u4e2d\u52a0\u56fe\u7247\u4ee3\u7801\u662f\u201c\u201d\u3002
1\u3001\u65b0\u5efahtml\u6587\u4ef6\uff0c\u5728body\u6807\u7b7e\u4e2d\u6dfb\u52a0img\u6807\u7b7e\uff0cimg\u6807\u7b7e\u5728html\u4e2d\u6ca1\u6709\u7ed3\u675f\u6807\u7b7e\uff0c\u6240\u4ee5\u4e0d\u9700\u8981\u6dfb\u52a0\u201c\u201d\u4ee3\u7801\u3002\u7ed9img\u6807\u7b7e\u6dfb\u52a0\u5c5e\u6027\u201csrc\u201d\uff0c\u5c5e\u6027\u503c\u586b\u81ea\u5df1\u60f3\u8981\u6dfb\u52a0\u56fe\u7247\u7684\u5730\u5740\uff0c\u8fd9\u91cc\u4ee5\u540c\u4e00\u76ee\u5f55\u4e0b\u76841.png\u4e3a\u4f8b\uff0c\u8fd9\u6837\u56fe\u7247\u5c31\u6dfb\u52a0\u597d\u4e86:
2\u3001\u4e3a\u4e86\u9632\u6b62\u7528\u6237\u6d4f\u89c8\u7f51\u9875\u65f6\u56fe\u7247\u52a0\u8f7d\u5931\u8d25\u800c\u4e0d\u77e5\u9053\u8fd9\u8fb9\u662f\u4ec0\u4e48\u5185\u5bb9\uff0c\u53ef\u4ee5\u7ed9img\u6807\u7b7e\u6dfb\u52a0\u201calt\u201d\u5c5e\u6027\uff0c\u5c5e\u6027\u503c\u586b\u60f3\u8981\u663e\u793a\u7684\u5185\u5bb9\uff0c\u8fd9\u91cc\u4ee5\u201c\u9e66\u9e49\u201d\u4e3a\u4f8b\uff0c\u6b64\u65f6\uff0c\u5f53\u56fe\u7247\u52a0\u8f7d\u5931\u8d25\u65f6\uff0c\u201c\u9e66\u9e49\u201d\u4e24\u4e2a\u5b57\u5c31\u4f1a\u663e\u793a\u51fa\u6765\uff1a
3\u3001img\u63d2\u5165\u7684\u56fe\u7247\u5927\u5c0f\u9ed8\u8ba4\u662f\u56fe\u7247\u81ea\u8eab\u7684\u5927\u5c0f\uff0c\u6211\u4eec\u53ef\u4ee5\u7528\u201cwidth\u201d\u5c5e\u6027\u548c\u201cheight\u201d\u5c5e\u6027\u63a7\u5236\u56fe\u7247\u5927\u5c0f\uff0c\u8fd9\u91cc\u4ee5\u5bbd\u5ea6200\u548c\u9ad8\u5ea6200\u4e3a\u4f8b\uff0c\u6b64\u65f6\u4ee3\u7801\u5c31\u662f\u201cwidth='200' height='200'\u201d\uff0c\u8fd9\u6837\u56fe\u7247\u5927\u5c0f\u5c31\u4f1a\u53d8\u6210200*200\uff1a
1\u3001\u63d2\u5165\u80cc\u666f\u56fe\u7247\u6709\u4e24\u79cd\u65b9\u6cd5\uff0c\u4e00\u79cd\u662f\u7528html\u7684img\u6807\u7b7e\uff0c\u53e6\u4e00\u79cd\u662f\u5229\u7528css\u7684background\u6807\u7b7e\u63d2\u5165\u3002\u5177\u4f53\u64cd\u4f5c\u662f\u9996\u5148\u65b0\u5efa\u4e00\u4e2ahtml\u6587\u4ef6\uff0c\u5199\u5165\u4e24\u4e2adiv\uff0c\u5206\u522b\u7528\u6765\u6f14\u793a\u4e24\u79cd\u65b9\u6cd5\u63d2\u5165\u6807\u7b7e\uff1a
2\u3001\u9996\u5148\u662f\u7528html\u6807\u7b7e\u63d2\u5165\u56fe\u7247\uff0c\u8fd9\u91cc\u76f4\u63a5\u5728img\u6807\u7b7e\u4e2d\u4f7f\u7528src\u5c5e\u6027\u5c31\u53ef\u4ee5\u63d2\u5165\u56fe\u7247\u8def\u5f84\u5c31\u6210\u529f\u4e86\uff1a
3\u3001\u63a5\u7740\u662f\u7528css\u63d2\u5165\uff0c\u5728div\u4e2d\u8bbe\u7f6eclass\u5c5e\u6027\u4e3aimg2\uff0c\u5728script\u6807\u7b7e\u4e2d\u4f7f\u7528background\u6807\u7b7e\u63d2\u5165\uff0c\u5176\u4e2durl\u662f\u6807\u7b7e\u7684\u8def\u5f84\uff0cno-repeat\u662f\u8bbe\u7f6e\u56fe\u7247\u4e0d\u91cd\u590d\uff0ccenter\u662f\u8bbe\u7f6e\u7167\u7247\u5c45\u4e2d\u663e\u793a\uff1a
4\u3001\u6700\u540e\u7ed9\u8fd9\u4e9b\u6807\u7b7e\u90fd\u8bbe\u7f6e\u4e00\u4e9b\u6837\u5f0f\uff0c\u8ba9\u5b83\u4eec\u663e\u5f97\u7f8e\u89c2\u4e00\u4e9b\u3002\u7136\u540e\u6253\u5f00\u6d4f\u89c8\u5668\u67e5\u770b\u6548\u679c\uff1a
5\u3001\u6253\u5f00\u6d4f\u89c8\u5668\uff0c\u53ef\u4ee5\u770b\u5230\u7167\u7247\u90fd\u663e\u793a\u51fa\u6765\u4e86\u3002\u4ee5\u4e0a\u5c31\u662fhtml\u63d2\u5165\u7167\u7247\u7684\u65b9\u6cd5\u4ecb\u7ecd\uff1a
代码是“<img scr = '图片地址'>”。
1、新建html文件，在body标签中添加img标签，img标签在html中没有结束标签，所以不需要添加“</img>”代码。给img标签添加属性“src”，属性值填自己想要添加图片的地址，这里以同一目录下的1.png为例，这样图片就添加好了:
2、为了防止用户浏览网页时图片加载失败而不知道这边是什么内容，可以给img标签添加“alt”属性，属性值填想要显示的内容，这里以“鹦鹉”为例，此时，当图片加载失败时，“鹦鹉”两个字就会显示出来：
3、img插入的图片大小默认是图片自身的大小，我们可以用“width”属性和“height”属性控制图片大小，这里以宽度200和高度200为例，此时代码就是“width='200' height='200'”，这样图片大小就会变成200*200：
首先将index.jpg图片下载下来，放到images文件中，然后建立一个网页文件 *.html，将这个网页文件也放到桌面位置，直接双击运行 *.html网页文件，就能显示出来了！
直接在项目中拖过来就可以了 自己写的话就写<img src="images/wall10.jpg" /> 路径要注意
你没有编程软件吗 用txt写的？ 如果用软件的话要把你的图片放在项目中
绛旓細鍏蜂綋鏂规硶鏄鍏堟柊寤轰竴涓html鏂囦欢锛岄噷闈㈡柊寤轰袱涓猟iv鏍囩锛岀浜屼釜鏍囩涓彃鍏img鏍囩骞鎻掑叆鍥剧墖锛2銆佺劧鍚庡湪涓婃柟鐨剆tyle鏍囩涓缃涓涓猟iv鐨勬牱寮忥紝鍏堢粰div闀垮害鍜岄珮搴︼紝鎺ョ潃鏄敤background灞炴у紩鍏ュ浘鐗囷紝璁剧疆鍥剧墖涓嶉噸澶嶄互鍙婂浘鐗囩殑鏄剧ず浣嶇疆j鍗冲彲锛3銆佹渶鍚庢墦寮娴忚鍣ㄥ氨鍙互鐪嬪埌鐢ㄤ袱绉嶆柟娉曞紩鍏ョ殑gif鐨勫浘鐗囦簡锛
绛旓細鍦ㄧ綉椤涓彃鍏ュ浘鐗噃tml鍥剧墖浠ｇ爜鏂规硶锛氭楠わ細涓銆乭tml鍥剧墖鏍囩璇硶 <img src="divcss-logo-201305.gif" width="165" height="60" /> img浠嬬粛锛歴rc 鍚庤窡鐨勬槸鍥剧墖璺緞鍦板潃width 璁剧疆鍥剧墖瀹藉害height 璁剧疆鍥剧墖楂樺害 浜屻佸叿浣揾tml 鍥剧墖鏄剧ず瀹炰緥 鍦╤tml婧愪唬鐮佷腑鍒嗗埆鎻掑叆涓夊紶鍥剧墖锛屼竴寮犲師濮嬪ぇ銆佷竴寮犲皢瀹藉害楂樺害...
绛旓細2銆佸湪鎻掑叆鍥剧墖鍓嶏紝瑕佸皢html鏂囦欢鍜屽浘鐗囨枃浠舵斁鍦ㄤ竴涓枃浠跺す鍐咃紝杩欓噷鐨刬mg鏂囦欢澶瑰氨鏄笓闂ㄥ瓨鏀惧浘鐗囩殑鍦版柟銆3銆佺劧鍚庡洖鍒颁唬鐮佹爮锛屽湪src涓緭鍏ラ摼鎺ュ湴鍧img/pic_01.jpg锛岃灏嗗浘鐗囩殑鍏蜂綋鍦板潃鍜屽悕绉板叏閮ㄥ啓鍏ㄦ墠鍙互鍦ㄧ綉椤典腑鐪嬪埌锛屽惁鍒欏氨浼氭樉绀鸿繛鎺ュけ璐ラ敊璇屾棤娉曡鐪嬪埌鍥剧墖銆4銆佸皢鏂囦欢淇濆瓨鍚庯紝鍦ㄦ祻瑙堝櫒涓垜涔堝氨鍙互...
绛旓細浠ｇ爜鏄<img scr = '鍥剧墖鍦板潃'>鈥濄1銆佹柊寤篽tml鏂囦欢锛屽湪body鏍囩涓坊鍔img鏍囩锛宨mg鏍囩鍦╤tml涓娌℃湁缁撴潫鏍囩锛屾墍浠ヤ笉闇瑕佹坊鍔犫</img>鈥濅唬鐮併傜粰img鏍囩娣诲姞灞炴р渟rc鈥濓紝灞炴у煎～鑷繁鎯宠娣诲姞鍥剧墖鐨勫湴鍧锛岃繖閲屼互鍚屼竴鐩綍涓嬬殑1.png涓轰緥锛岃繖鏍峰浘鐗囧氨娣诲姞濂戒簡:2銆佷负浜嗛槻姝㈢敤鎴锋祻瑙堢綉椤垫椂鍥剧墖鍔犺浇澶辫触...
绛旓細鐢佃剳銆佹祻瑙堝櫒銆乭tml缂栬緫鍣ㄣ1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html銆2銆佸湪index.html涓鐨<body>鏍囩涓紝杈撳叆html浠ｇ爜锛<form style="background-image: url(small3.png)"><input type="text"></form> 3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃舵垚鍔鍦╤tml鐨勮〃鍗涓坊鍔浜嗚儗鏅鍥剧墖銆
绛旓細鍦℉TML閭欢涓姞鍏ュ浘鐗锛屼綘鍙互浣跨敤HTML鐨刞<img>`鏍囩锛岀劧鍚庡湪璇ユ爣绛剧殑`src`灞炴т腑鎸囧畾鍥剧墖鐨刄RL銆備絾鏄紝闇瑕佹敞鎰忕殑鏄紝鐢变簬澶у鏁扮數瀛愰偖浠舵湇鍔￠兘闄愬埗浜嗛偖浠朵腑鐩存帴閾炬帴鍒板閮ㄦ湇鍔″櫒涓婄殑鍥剧墖锛屽洜姝ら氬父闇瑕佸皢鍥剧墖瀛樺偍鍦⊿MTP鏈嶅姟鍣ㄦ垨鑰呬竴涓叕鍏辩殑鍥惧儚鎵樼鏈嶅姟涓娿備互涓嬫槸涓涓熀鏈殑渚嬪瓙锛氣<img src="cid:...
绛旓細浠ｇ爜鏄<img scr = '鍥剧墖鍦板潃'>鈥濄1銆佹柊寤篽tml鏂囦欢锛屽湪body鏍囩涓坊鍔img鏍囩锛宨mg鏍囩鍦╤tml涓娌℃湁缁撴潫鏍囩锛屾墍浠ヤ笉闇瑕佹坊鍔犫</img>鈥濅唬鐮併傜粰img鏍囩娣诲姞灞炴р渟rc鈥濓紝灞炴у煎～鑷繁鎯宠娣诲姞鍥剧墖鐨勫湴鍧锛岃繖閲屼互鍚屼竴鐩綍涓嬬殑1.png涓轰緥锛岃繖鏍峰浘鐗囧氨娣诲姞濂戒簡:2銆佷负浜嗛槻姝㈢敤鎴锋祻瑙堢綉椤垫椂鍥剧墖鍔犺浇澶辫触...
绛旓細鎿嶄綔鏂规硶濡備笅锛1銆佷互Hbuilder鏉ヨ瑙ｏ紝棣栧厛鏂板缓涓涓狧TML椤甸潰锛屽鍥撅紱2銆佹帴鐫缁欐爣绛捐缃儗鏅鍥剧墖锛屽鍥捐缃殑鏄<body>鏍囩锛3銆佺劧鍚庢柊寤轰竴涓猚ss鏂囦欢锛屽鍥撅紱4銆佽繖閲岀粰body鏍囩璁剧疆background-size灞炴э紝濡傛灉鏍囩鏄痙iv灏卞啓div锛岀劧鍚庡彲浠ヨ缃搴﹀拰楂樺害锛5銆佸鍥炬墍绀猴紝鍦╪ew_file.html閲岄潰缂栬緫锛<link href=...
绛旓細word鏂囨。涓枃浠鎬庝箞鎻掑叆gif鍔ㄥ浘 5銆佽繖鏍峰氨浠ョ綉椤电殑褰㈠紡淇濆瓨涓嬫潵浜嗭紝鎵惧埌鍚庡弻鍑绘墦寮锛屾煡鐪嬪姩鐢绘晥鏋溿倃ord鏂囨。涓枃浠舵庝箞鎻掑叆gif鍔ㄥ浘 6銆侀氳繃鏌ョ湅鎴戜滑涔熶細鍙戠幇锛屾枃浠剁殑鍥炬爣涔熷彂鐢熶簡鐩稿簲鐨勫彉鍖栥html涓庝箞鍦鑳屾櫙鍥剧墖涓彃鍏瀛椾綋骞舵敼鍙樺瓧浣撲綅缃紵绗竴绉嶆柟寮忔槸image浣滀负鑳屾櫙鍥剧墖锛屽嵆锛歜ackground:url(...);渚嬪...
绛旓細闇瑕佸噯澶囩殑鏉愭枡鍒嗗埆鏈夛細鐢佃剳銆乧hrome娴忚鍣ㄣ乭tml缂栬緫鍣ㄣ1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓涓涓猦tml鏂囦欢锛屼緥濡傦細index.html銆2銆佸叾娆★紝鍦╥ndex.html涓鐨<body>鏍囩涓紝杈撳叆css鏍峰紡浠ｇ爜锛歴tyle="background-size:100%background: url(image.jpg);"銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃舵垚鍔鎻掑叆浜嗚儗鏅鍥剧墖銆
