怎么在html里面放图?
html插入图片有两种方式:一种是通过<img>标签插入的正常的图片,另一种是通过css样式插入的背景图片。
问题分析:
1、首先你是通过第二种方式插入的是背景图片,直接用width和height只能控制div的宽度和高度。
2、如果你插入的图片是通过<img>标签的方式来插入的话,可以通过<img>自身的属性控制图片大小,代码格式是:<img src="图片路径" width="图片宽度" height="图片高度"/>。
3、如果非要通过css控制背景图片的大小,可以通过background-size样式来实现,具体的css格式是:background-size:宽度 高度; (如下图所示)。
扩展资料:
1、background 是用于在一个声明中设置所有背景属性的一个简写属性。
格式: background: {属性值}
继承性: NO;
可能的值:
background-color(背景颜色)
background-image(背景图片)
background-repeat(背景拉伸方式)
background-attachment(固定或者随着页面的其余部分滚动)
background-position(背景定位)
新增的值:
background-clip(规定背景的绘制区域)
background-origin(相对于容器中来定位背景图像)
background-size (背景图像的大小)
参考资料:
百度百科-background
绛旓細缁撹锛鍦℉TML椤甸潰涓婃樉绀哄浘鐗囷紝鍙渶浣跨敤鏍囩鍗冲彲銆備互涓嬫槸璇︾粏鐨勬楠ゅ拰鐩稿叧鐭ヨ瘑锛氳鎻掑叆鍥剧墖锛屾渶绠鍗曠殑鏂规硶鏄湪HTML涓彃鍏ユ爣绛撅紝鍏跺熀鏈牸寮忎负锛氥傞鍏堬紝鍒涘缓涓涓爣绛撅紝骞跺湪src灞炴т腑濉叆鍥剧墖鐨勬湰鍦拌矾寰勩傚綋浣犲湪娴忚鍣ㄤ腑鎵撳紑鍖呭惈姝ゆ爣绛剧殑HTML鏂囦欢鏃讹紝鍥剧墖灏变細鏄剧ず鍦ㄩ〉闈笂锛屽涓嬫墍绀猴細鍊煎緱娉ㄦ剰鐨勬槸锛屾爣绛惧苟闈...
绛旓細鐩稿璺緞锛氬鏋滄槸缃戠珯鐨勮瘽锛屽垯涓轰笅闈㈢殑锛歩mg src=images/tupian.jpeg/>鐩稿璺緞:濡傛灉鏄綉绔欙紝鍒欏涓:灏嗚繖涓html鏂囦欢涓巌mages鏀惧湪鍚屼竴涓洰褰曚腑:灏嗘鍥剧墖涓巋tml鏂囦欢鏀惧湪鍚屼竴涓洰褰曚腑:鏍囩涓紝杈撳叆html浠g爜锛歩mg src="small3.png"/>銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃舵坊鍔犵殑鏈湴鍥剧墖鐨勮矾寰勬槸鐩稿璺緞銆
绛旓細绗竴涓:缁檆ss鏂囦欢娣诲姞鑳屾櫙鍥剧墖:浣跨敤url(../images/鑳屾櫙鍥剧墖2.jpg)鍦╟ss涓锛岀敱浜巋tml鏂囦欢鍜宑ss鏂囦欢鐨勭浉瀵逛綅缃笉鍚岋紝鍐呰仈css鍜屽鍏ss涓紩鍏ュ浘鐗囩殑璺緞浼氭湁鎵涓嶅悓銆傚鍥炬墍绀:绗簩:浠嬬粛:濡傚浘鎵绀:绗笁绉:鍦╠iv涓坊鍔犲浘鐗囥俰mg src=../images/鑳屾櫙鍥1.jpgalt=style=width:100%;height:100%>韬珮:10...
绛旓細1銆佹柊寤篽tml鏂囦欢锛屽湪body鏍囩涓坊鍔爄mg鏍囩锛宨mg鏍囩鍦╤tml涓病鏈夌粨鏉熸爣绛撅紝鎵浠ヤ笉闇瑕佹坊鍔犫</img>鈥濅唬鐮併傜粰img鏍囩娣诲姞灞炴р渟rc鈥濓紝灞炴у煎~鑷繁鎯宠娣诲姞鍥剧墖鐨勫湴鍧锛岃繖閲屼互鍚屼竴鐩綍涓嬬殑1.png涓轰緥锛岃繖鏍峰浘鐗囧氨娣诲姞濂戒簡:2銆佷负浜嗛槻姝㈢敤鎴锋祻瑙堢綉椤垫椂鍥剧墖鍔犺浇澶辫触鑰屼笉鐭ラ亾杩欒竟鏄粈涔堝唴瀹癸紝鍙互缁檌mg鏍囩娣...
绛旓細1銆佺洿鎺鍦╤tml涓鐨勬爣绛鹃噷璁剧疆锛<p style=鈥漛ackground-image:url(xxx.jpg)鈥>璁剧疆涓涓钀界殑鑳屾櫙鍥惧儚</p> 2銆佸湪CSS涓婅缃甴tml涓殑 鈥<p>涓涓钀</p>鈥 鐨勮儗鏅浘鍍忥細p{ background-image:url(xxx.jpg); } 鈶″浘鍍忓厓绱爄mg锛<img src="xxx.jpg" alt="杩欐槸涓涓浘鍍忓厓绱"> ...
绛旓細1銆佹墦寮HBuilder锛2銆佹柊寤html椤圭洰銆3銆佽缃枃浠跺悕锛岀偣鍑烩滃畬鎴愨濄4銆佸皢鑳屾櫙鍥炬嫋鍔ㄥ埌Hbuilder宸ョ▼鐨刬mg鏂囦欢澶广5銆佺偣鍑烩滅‘瀹氣濄6銆佹壘鍒<body></body>銆7銆佸皢<body>鏀规垚<bodybackground=\"img/鑳屾櫙1.jpg\">銆傚叾涓渋mg/鑳屾櫙1.jpg鈥濅负鑳屾櫙鍥捐矾寰勩8銆佺劧鍚庝繚瀛樻枃妗c9銆佺偣鍑烩滆繍琛屸濋夋嫨娴忚...
绛旓細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鍥剧墖浠g爜鏂规硶锛氭楠わ細涓銆乭tml鍥剧墖鏍囩璇硶 <img src="divcss-logo-201305.gif" width="165" height="60" /> img浠嬬粛锛歴rc 鍚庤窡鐨勬槸鍥剧墖璺緞鍦板潃width 璁剧疆鍥剧墖瀹藉害height 璁剧疆鍥剧墖楂樺害 浜屻佸叿浣揾tml 鍥剧墖鏄剧ず瀹炰緥 鍦╤tml婧愪唬鐮佷腑鍒嗗埆鎻掑叆涓夊紶鍥剧墖锛屼竴寮犲師濮嬪ぇ銆佷竴寮犲皢瀹藉害楂樺害...
绛旓細鏂规硶1锛氱粰鍥剧墖鍔犱竴涓猳nclick浜嬩欢锛岀敤js浜嬩欢鏉ユ彁浜ゅ氨鍙互瀹炵幇銆備緥锛<input type="image" src="鍥剧墖鍦板潃" />鏂规硶2锛氭湁CSS鎶婂浘鐗囪涓烘寜閽儗鏅氨鍙互浜 渚: <input name="" type="button" style=" width:10px; height:10px; border:0; background:url(鍥剧墖璺緞) no-repeat left top" />...
绛旓細闇瑕佸噯澶囩殑鏉愭枡鍒嗗埆鏈夛細鐢佃剳銆乧hrome娴忚鍣ㄣ乭tml缂栬緫鍣ㄣ1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓涓涓猦tml鏂囦欢锛屼緥濡傦細index.html銆2銆佸叾娆★紝鍦╥ndex.html涓鐨<body>鏍囩涓紝杈撳叆css鏍峰紡浠g爜锛歴tyle="background-size:100%background: url(image.jpg);"銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃舵垚鍔熸彃鍏ヤ簡鑳屾櫙鍥剧墖銆