css代码怎么插入图片
可以在CSS里面用background-image:url(你的图片地址)。这样来加入图片，展现到网页中。
<div id="bgimg"></div>
#bgimg {
background: #333 url(图片路径) center center no-repeat;
}
第一个参数，图片底层的背景颜色，第二个参数，图片路径，第三个参数，图片上下的相对位置（其他参数left,right），第四个参数，图片左右的相对位置（top,bottom），第五个参数，图片的重复（其他参数 repeat,repeat-x,repeat-y）
扩展资料：
css背景图片代码：
{background-image: url(url)|none}；指定要使用的一个或多个背景图像
例子代码：
<html>
<head>
<meta charset="UTF-8">
<title>背景图片</title>
<style>
body{background:#ddd;}
.div1{
width:300px;
height:150px;
background-image:url(2.jpg);
}
</style>
</head>
<body>
<div>背景图片</div>
</body>
绛旓細1銆佹墦寮鎿嶄綔杞欢杩欓噷鐢―W锛屽畾涔変竴涓css鏍峰紡锛屽涓嬪浘 2銆侀鍏堢湅涓嬶紝鑳屾櫙鍥炬晥鏋滐紝濡備笅鍥炬墍绀猴細3銆佸湪div涓娣诲姞涓涓猧mg锛岃緭鍏ヤ互涓浠ｇ爜銆傚涓嬪浘鎵绀猴細4銆佸嵆鍙疄鐜板棰橈紝css鍥剧墖涔嬩笂鍐嶅姞涓寮犲浘鐗囷細濡備笅鍥炬墍绀猴細
绛旓細css浣縟iv鑳屾櫙鍥剧墖濉厖鐨勫叿浣撴搷浣滄楠ゅ涓嬶細1銆佹垜浠鍏堟墦寮鍓嶇寮鍙戝伐鍏凤紝鏂板缓涓涓猦tml浠ｇ爜椤甸潰銆2銆佸湪html浠ｇ爜椤甸潰涓婂垱寤轰竴涓敤浜庤缃儗鏅鑹茬殑div鏍囩锛岀劧鍚庣粰杩欎釜鏍囩娣诲姞涓奵lass = "bg-img"銆3銆佽缃儗鏅浘鐗囷紝鍒涘缓style鏍囩锛岀劧鍚庡湪鏍囩閲岄潰瀵圭被涓篵g-img璁剧疆鑳屾櫙鍥剧墖銆佸浘鐗囦笉閲嶅銆佸銆侀珮鐨勬牱寮忋4...
绛旓細css璁剧疆鍥剧墖浠ｇ爜锛氫篃灏辨槸璇鍦╟ss涓粰缃戦〉涓娣诲姞鑳屾櫙鍥剧墖锛 .bjimg{ width:200px; height:200px; background:url(鍥剧墖瀛樻斁璺緞) no-repeat;} 璁茶В锛氬洜涓烘槸鍦╟ss涓缃浘鐗囷紝鎵浠ヨ捣涓涓css鏍峰紡鍚嶄负bjimg锛屽湪div涓紩鍏ワ紱寤虹珛姝ss瀹藉害(width)锛200px锛岄珮搴︼紙height锛200px; background:url鏄紩...
绛旓細1銆侀鍏堟墦寮sublime_text杞欢锛屽湪鍏朵腑鏂板缓涓涓猦tml鏂囦欢锛岀劧鍚庡啓鍏ユ渶绠鍗曠殑缃戦〉鏍煎紡浠ｇ爜锛2銆佺劧鍚庢柊寤轰竴涓珮200px锛屽200px锛岄鑹蹭负钃濊壊鐨刣iv鐩掑瓙锛3銆佹帴鐫鍦ㄤ唬鐮佷腑鍔犲叆background-image锛岀劧鍚庡紩鍏ヤ竴寮鍥剧墖锛寀rl閲岄潰鐨勬槸鍥剧墖鐨勭浉瀵硅矾寰勫湴鍧锛岀浉瀵圭殑鏄痟tml鏂囦欢鎵鍦ㄧ洰褰曪細4銆佹渶鍚庢墦寮娴忚鍣紝灏卞彲浠ョ湅鍒鎻掑叆濂...
绛旓細鍙互鍦–SS閲岄潰鐢╞ackground-image:url(浣犵殑鍥剧墖鍦板潃)銆傝繖鏍锋潵鍔犲叆鍥剧墖,灞曠幇鍒扮綉椤典腑銆傚湪缃戦〉涓鎻掑叆鍥剧墖html鍥剧墖浠ｇ爜鏂规硶锛氭楠わ細涓銆乭tml鍥剧墖鏍囩璇硶浜屻佸叿浣揾tml鍥剧墖鏄剧ず瀹炰緥鍦╤tml婧愪唬鐮涓垎鍒彃鍏ヤ笁寮犲浘鐗囷紝涓寮犲師濮嬪ぇ銆佷竴寮犲皢瀹藉害楂樺害鏀瑰皬灏忋佷竴寮犲皢瀹藉害楂樺害鏀瑰ぇ銆1銆佸疄渚嬪畬鏁磆tml浠ｇ爜锛2銆乭tml鎻掑叆...
绛旓細鍦╟ss鏍峰紡閲屽姞灏卞彧鑳芥槸鍔犺儗鏅浘,css浠ｇ爜涓:background:url(鍦板潃) repeat 0px 2px;鍦╱rl鐨勬嫭鍙烽噷濉笂鍥剧墖鐨勫湴鍧,repeat涓哄惊鐜,濡備笉寰幆鍒欎负no-repeat,鍚庨潰鐨0px 2px鍙槸璋冩暣鍥剧墖鐨勪綅缃︹ 鏈洖绛旂敱鎻愰棶鑰呮帹鑽 涓炬姤| 绛旀绾犻敊 | 璇勮 6 6 宸﹁崇帇浠 閲囩撼鐜:32% 鎿呴暱: 甯歌杞欢 C#/.NET C/C++ 鏁版嵁搴...
绛旓細闇瑕佸噯澶囩殑鏉愭枡鍒嗗埆鏈夛細鐢佃剳銆佹祻瑙堝櫒銆乭tml缂栬緫鍣ㄣ1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html銆2銆佸湪index.html涓殑鏍囩涓紝杈撳叆css浠ｇ爜锛歜ody{background-image: URL(../../image/image.jpg)}銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃禖SS鎴愬姛閫氳繃鐩稿璺緞寮曠敤浜鍥剧墖銆
绛旓細闇瑕佸噯澶囩殑鏉愭枡鍒嗗埆鏈夛細鐢佃剳銆乧hrome娴忚鍣ㄣ乭tml缂栬緫鍣ㄣ1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓涓涓猦tml鏂囦欢锛屼緥濡傦細index.html銆2銆佸叾娆★紝鍦╥ndex.html涓殑鏍囩涓紝杈撳叆css鏍峰紡浠ｇ爜锛歴tyle="background-size:100%background: url(image.jpg);"銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃舵垚鍔鎻掑叆浜嗚儗鏅鍥剧墖銆
绛旓細鍐css鑳屾櫙鍥剧墖浠ｇ爜鍙互鍙傝冧互涓嬶細 body{background-image:url(abc.jpg);}
绛旓細杩欒竟鏄畝鍗曠殑浠ｇ爜瀹炰緥锛沚ody { background: url("http://img.iknow.bdimg.com/jctuijian/0706/jctj.jpg?t=1404606636"); } 鍏跺疄鎵鏈夌殑鍥剧墖寮曠敤閮芥槸涓鏍风殑銆備竴鑸潵璇村挶浠兘鏄敤鐩稿璺緞鍜岀粷瀵硅矾寰勬潵鏄剧ず鍥剧墖銆傜劧鑰岃寮曠敤缃戠粶涓婄殑鍥剧墖鐨勬椂鍊欙紝鍙鍚ц矾寰勭敤鎴愮綉鍧灏卞彲浠ヤ簡銆俰mg鐨剆rc涔熸槸涓鏍风殑...
