html背景图片怎么添加
有很多小伙伴在编辑网页的时候，觉得网页太过单调，向要添加背景图片来丰富自己编辑的网页，不过却不知道怎么在html中添加背景图片，小编研究了很久，总结出了添加的方法，现在就在下文中分享给大家，想要学习的小伙伴快来看看吧。
html背景图片怎么添加?
具体步骤如下：
1.插入背景图片有两种方法，一种是用html的img标签，另一种是利用css的background标签插入。具体操作是首先新建一个html文件，写入两个div，分别用来演示两种方法插入标签;
2.首先是用html标签插入图片，这里直接在img标签中使用src属性就可以插入图片路径就成功了;
3.接着是用css插入，在div中设置class属性为img2，在script标签中使用background标签插入，其中url是标签的路径，no-repeat是设置图片不重复，center是设置照片居中显示;
4.最后给这些标签都设置一些样式，让它们显得美观一些。然后打开浏览器查看效果;
5.打开浏览器，可以看到照片都显示出来了。
以上就是小编为大家带来的html背景图片怎么添加的方法了，希望解决大家的问题。
在 HTML 中，您可以使用 `<body>` 标签的 `background-image` 属性或者使用内联样式来添加背景图片。以下是两种添加背景图片的方法：
1. 使用 `<body>` 标签的 `background-image` 属性：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>添加背景图片示例</title>
</head>
<body style="background-image: url('background.jpg');">
<h1>欢迎来到我的网站</h1>
</body>
</html>
```
在这个例子中，将 `background.jpg` 替换为您要使用的背景图片的文件名。请确保图片文件与 HTML 文件位于同一文件夹中，或者提供正确的文件路径。
2. 使用内联样式添加背景图片：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>添加背景图片示例</title>
</head>
<body>
<div style="background-image: url('background.jpg');"></div>
<h1>欢迎来到我的网站</h1>
</body>
</html>
```
在这个例子中，我们使用了一个 `<div>` 标签来包含背景图片。您可以根据需要将 `<div>` 标签替换为其他任何标签。请确保图片文件与 HTML 文件位于同一文件夹中，或者提供正确的文件路径。
绛旓細绗竴涓:缁檆ss鏂囦欢娣诲姞鑳屾櫙鍥剧墖:浣跨敤url(../images/鑳屾櫙鍥剧墖2.jpg)鍦╟ss涓锛岀敱浜巋tml鏂囦欢鍜宑ss鏂囦欢鐨勭浉瀵逛綅缃笉鍚岋紝鍐呰仈css鍜屽鍏ss涓紩鍏ュ浘鐗囩殑璺緞浼氭湁鎵涓嶅悓銆傚鍥炬墍绀:绗簩:浠嬬粛:濡傚浘鎵绀:绗笁绉:鍦╠iv涓坊鍔犲浘鐗囥俰mg src=../images/鑳屾櫙鍥1.jpgalt=style=width:100%;height:100%>韬珮:10...
绛旓細html鑳屾櫙鍥剧墖鎬庝箞娣诲姞?鍏蜂綋姝ラ濡備笅锛1.鎻掑叆鑳屾櫙鍥剧墖鏈変袱绉嶆柟娉曪紝涓绉嶆槸鐢╤tml鐨刬mg鏍囩锛屽彟涓绉嶆槸鍒╃敤css鐨刡ackground鏍囩鎻掑叆銆傚叿浣撴搷浣滄槸棣栧厛鏂板缓涓涓猦tml鏂囦欢锛屽啓鍏ヤ袱涓猟iv锛屽垎鍒敤鏉ユ紨绀轰袱绉嶆柟娉曟彃鍏ユ爣绛;2.棣栧厛鏄敤html鏍囩鎻掑叆鍥剧墖锛岃繖閲岀洿鎺ュ湪img鏍囩涓娇鐢╯rc灞炴у氨鍙互鎻掑叆鍥剧墖璺緞灏辨垚鍔熶簡;3.鎺...
绛旓細1銆佹墦寮HBuilderX杞欢銆2銆佽繘鍏ュ悗鏂板缓涓涓猦tml鏂囦欢銆3銆佸懡鍚嶄负鑳屾櫙鍥剧墖鐐瑰嚮鍒涘缓銆4銆佺劧鍚庡湪鍚屼竴鏂囦欢澶逛腑鏀惧叆涓寮犺儗鏅浘鐗銆5銆佺劧鍚庡湪head涓紪鍐檚tyle鏍峰紡锛屽鍥炬墍绀恒6銆佹寜ctrl+s淇濆瓨锛岀劧鍚庣偣鍑讳笂鏂硅棰戝浘鏍囷紝閫夋嫨娴忚鍣ㄨ繘琛岃繍琛屽嵆鍙7銆佹晥鏋滃鍥炬墍绀猴紝鏈缃钩閾烘柟寮忕殑鎯呭喌涓洪粯璁ゆ按骞崇珫鐩村钩閾恒8銆佷笉鎯...
绛旓細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鎻掑叆鍥剧墖鏈変袱绉嶆柟寮忥細涓绉嶆槸閫氳繃<img>鏍囩鎻掑叆鐨勬甯哥殑鍥剧墖锛屽彟涓绉嶆槸閫氳繃css鏍峰紡鎻掑叆鐨勮儗鏅浘鐗銆傞棶棰樺垎鏋愶細1銆侀鍏堜綘鏄氳繃绗簩绉嶆柟寮忔彃鍏ョ殑鏄儗鏅浘鐗囷紝鐩存帴鐢╳idth鍜宧eight鍙兘鎺у埗div鐨勫搴﹀拰楂樺害銆2銆佸鏋滀綘鎻掑叆鐨勫浘鐗囨槸閫氳繃<img>鏍囩鐨勬柟寮忔潵鎻掑叆鐨勮瘽锛屽彲浠ラ氳繃<img>鑷韩鐨勫睘鎬ф帶鍒跺浘鐗囧ぇ灏忥紝...
绛旓細html涓璁剧疆鍏冪礌鐨勮儗鏅壊閮芥槸閫氳繃CSS涓殑background 灞炴ф潵瀹屾垚銆備緥濡傦紝缁欐暣涓〉闈紙body锛夎缃儗鏅壊锛歜ody{background: #ddd;}锛涘鏋滆灏嗗浘鐗囦綔涓鸿儗鏅壊锛歜ody{background-image: url(1.jpg);}锛屽叾涓璾rl鎷彿鍚庨潰鐨勬槸鑳屾櫙鍥剧墖鐨勯摼鎺ャ
绛旓細鍙互浣跨敤html鐨background-image鏍囩鍜宐ackground-size瀹炵幇鎻掑叆鑳屾櫙鍥剧墖鍜屾帶鍒跺浘鐗囧ぇ灏忋傚叿浣撴楠ゅ涓嬶細闇瑕佸噯澶囩殑鏉愭枡鍒嗗埆鏄細鐢佃剳銆佹祻瑙堝櫒銆乽ltraedit銆1銆佸湪ue缂栬緫鍣ㄤ腑鏂板缓涓涓┖鐧界殑html鏂囦欢銆2銆佸湪ue缂栬緫鍣ㄤ腑杈撳叆浠ヤ笅html浠ｇ爜銆3銆佺紪杈戝畬鎴愪互鍚庯紝鍦╱e缂栬緫鍣ㄤ腑鐐瑰嚮淇濆瓨锛屾牸寮忛夋嫨UTF8鏃燘OM銆4銆佸湪娴忚鍣...
绛旓細html璁剧疆鑳屾櫙鍥剧墖鐨勬柟娉曟湁锛涓绉嶆槸鐢╤tml鐨刬mg鏍囩杩涜鎻掑叆锛屽彟涓绉嶆槸鍒╃敤css鐨刡ackground鏍囩鎻掑叆銆侶TML绉颁负瓒呮枃鏈爣璁拌瑷锛屾槸涓绉嶆爣璇嗘х殑璇█銆傚畠鍖呮嫭涓绯诲垪鏍囩锛岄氳繃杩欎簺鏍囩鍙互灏嗙綉缁滀笂鐨勬枃妗ｆ牸寮忕粺涓锛屼娇鍒嗘暎鐨処nternet璧勬簮杩炴帴涓轰竴涓昏緫鏁翠綋銆侶TML鏂囨湰鏄敱HTML鍛戒护缁勬垚鐨勬弿杩版ф枃鏈紝HTML鍛戒护鍙互...
绛旓細绗竴姝ワ紝璁剧疆鑳屾櫙棰滆壊锛屽彧瑕佹敼鍙榖ody鐨刡gcolor灞炴э紝涓嶈繃瑕佹敞鎰忛鑹蹭笌鏂囨湰棰滆壊鐨勬惌閰嶈鍗忚皟娓呮櫚銆傜浜屾锛HTML缃戦〉鐨鑳屾櫙鍥剧墖寰楃敤background灞炴э紝鏂囦欢璺緞濡傛灉鍜岀綉椤靛湪涓涓枃浠跺す鍐呭垯鍙敤鍐欏浘鐗囧悕瀛楀苟涓斿鏋滃浘鐗囧皬浜庣綉椤垫樉绀虹獥鍙ｏ紝浼氳嚜鍔ㄩ噸澶娣诲姞銆傜涓夋锛屽鏋滆鍦ㄧ綉椤典腑鎻掑叆鍥剧墖锛屽垯寰楄皟鐢ㄣ傜鍥涙锛屽鏋滆...
绛旓細html鍦╠iv鍔犺儗鏅浘鐗鐨勫叿浣撴搷浣滄楠ゅ涓嬶細1銆佹柊寤轰竴涓猦tml鏂囨。锛岀紪鍐欎竴涓被鍚嶇瓑浜巗etbg鐨刣iv鏍囩銆2銆乨iv鍐欎笂鏍峰紡锛屸渂ackground: url(bg_main.jpg)锛涒濈殑鏍峰紡锛岃缃儗鏅浘鍗冲彲銆3銆佽缃簡鑳屾櫙鍥撅紝缁檇iv璁剧疆楂樺害鈥渉eight锛500px鈥濄4銆佽缃珮搴︿箣鍚庯紝楂樺害鍜岃儗鏅浘灏卞彲浠ュ嚭鐜般5銆乨iv寰堝鏂囧瓧锛岃秴杩囦簡...
