css如何插入图片
css插入图片方法如下：
操作设备：戴尔笔记本电脑
操作系统：win10
操作程序：html编辑器v8.21
1、打开html编辑器并创建一个新的html文件。
2、新建完一个新的html文件后，在index.html的<style>标签中，输入如下所示的CSS代码。
3、输入完CSS代码之后，接下来运行index.html页面，可以发现，本地图片通过背景图片衜中的本地路径成功调用为了背景图片，图片就成功加入了。
输入完CSS代码之后，接下来运行index.html页面，可以发现，本地图片通过背景图片衜中的本地路径成功调用为了背景图片，图片就成功加入了
绛旓細1銆佺粰body璁剧疆涓涓儗鏅鍥剧墖锛屼笉閲嶅灞呬腑鏄剧ず淇濇寔鍥剧墖鐨勫師鏈夊ぇ灏忥紝绠鍗曠殑浠ｇ爜绀轰緥濡備笅锛歜ody{ background: url(/i/eg_bg_03.gif) no-repeat fixed center; }2銆佽繍琛岀殑鏁堟灉濡備笅锛
绛旓細1銆佹墦寮html缂栬緫鍣ㄥ苟鍒涘缓涓涓柊鐨刪tml鏂囦欢銆2銆佹柊寤哄畬涓涓柊鐨刪tml鏂囦欢鍚庯紝鍦╥ndex.html鐨勬爣绛句腑锛岃緭鍏ュ涓嬫墍绀虹殑CSS浠ｇ爜銆3銆佽緭鍏ュ畬CSS浠ｇ爜涔嬪悗锛屾帴涓嬫潵杩愯index.html椤甸潰锛屽彲浠ュ彂鐜帮紝鏈湴鍥剧墖閫氳繃鑳屾櫙鍥剧墖琛滀腑鐨勬湰鍦拌矾寰勬垚鍔熻皟鐢ㄤ负浜嗚儗鏅浘鐗囷紝鍥剧墖灏辨垚鍔熷姞鍏ヤ簡銆
绛旓細1锛庤儗鏅鑹诧細background-color 璇硶锛歿background-color:鏁板紏 娉ㄦ剰锛氬湪html褰撲腑锛岃涓烘煇涓璞″姞涓婅儗鏅壊鍙湁涓绉嶅姙娉曪紝閭ｅ氨鏄厛鍋氫竴涓〃鏍硷紝鍦ㄨ〃鏍间腑璁剧疆瀹岃儗鏅壊锛屽啀鎶婂璞℃斁杩涘崟鍏冩牸銆傝繖鏍峰仛姣旇緝楹荤儲锛屼笉浣嗕唬鐮佽緝澶氾紝杩樿涓鸿〃鏍肩殑澶у皬鍜屽畾浣嶄激浜涜剳绛嬨傝〃鏍艰儗褰遍鑹诧細style="background-color:red"...
绛旓細css鍙兘閫氳繃鑳屾櫙鍥惧舰寮忔潵缁欐枃妗ｆ坊鍔犲浘鐗 background-image: url(鍥剧墖鍦板潃);background: url(鍥剧墖鍦板潃) 0 0 no-repeat;.img1{ background-image: url(1.jpg);background-size: 200px;}
绛旓細鍙互鍦–SS閲岄潰鐢╞ackground-image:url(浣犵殑鍥剧墖鍦板潃)銆傝繖鏍锋潵鍔犲叆鍥剧墖锛屽睍鐜板埌缃戦〉涓 bgimg { background: #333 url(鍥剧墖璺緞) center center no-repeat;} 绗竴涓弬鏁帮紝鍥剧墖搴曞眰鐨勮儗鏅鑹诧紝绗簩涓弬鏁帮紝鍥剧墖璺緞锛岀涓変釜鍙傛暟锛屽浘鐗囦笂涓嬬殑鐩稿浣嶇疆锛堝叾浠栧弬鏁發eft,right锛夛紝绗洓涓弬鏁帮紝鍥剧墖宸﹀彸鐨...
绛旓細灞炴э紝骞跺皢鍥剧墖璺緞鎸囧畾涓烘湰鍦版枃浠惰矾寰勩備緥濡傦細body { background-image: url('./images/bg.jpg');} 鍏朵腑 ./images/bg.jpg 鏄浘鐗囩殑鏈湴鏂囦欢璺緞锛屽彲浠ユ牴鎹疄闄呮儏鍐垫浛鎹负鍏朵粬璺緞銆傝娉ㄦ剰锛屽鏋滄偍鐨 CSS 鏂囦欢鍜屽浘鍍忔枃浠朵笉鍦ㄥ悓涓鐩綍涓紝鍒欓渶瑕佷娇鐢ㄧ粷瀵硅矾寰勬垨鐩稿璺緞鏉ユ寚瀹氬浘鍍忔枃浠剁殑浣嶇疆銆
绛旓細1銆侀鍏堬紝鎴戜滑搴旇鍏堢粰div璁剧疆瀹藉害鍜岄珮搴︼紝淇濊瘉鏂囧瓧鏈変竴涓寖鍥淬2銆佺劧鍚庨氳繃background缁檇iv娣诲姞涓寮鍥剧墖浣滀负瀹冪殑鑳屾櫙銆3銆佸鍥撅紝閫氳繃url()鏉ヨ繛鎺ュ浘鐗囷紝url閲岄潰鏀剧疆鐨勫氨鏄儗鏅浘鐗囩殑璺緞銆4銆佽繖鏍凤紝淇濆瓨涔嬪悗鏂囧瓧灏变細瑕嗙洊鍦ㄥ浘鐗囩殑涓婇潰浜嗭紝鑰屽鏋滀娇鐢╥mg鏍囩锛屽垯娌℃湁杩欑鏁堟灉銆
绛旓細鏍囩锛屼笅闈㈡紨绀轰竴涓嬶細1銆佸噯澶囦竴涓猦tml鏂囦欢鍜屼竴寮鍥剧墖锛屽苟鏀惧湪鍚屼竴涓枃浠跺す閲岄潰 2銆佹墦寮html鏂囦欢锛屾寜涓嬪浘涓孩鑹叉閫夊嚭鏉ョ殑浣嶇疆鍦╞ody鏍囩閲岄潰杈撳叆锛岀劧鍚庝繚瀛樸./浠ｈ〃浠ｈ〃褰撳墠鐩綍 3銆佸湪娴忚鍣ㄤ腑鎵撳紑html鏂囦欢锛屽氨鍙互鏄剧ず鎻掑叆鐨勫浘鐗囦簡锛屽涓嬪浘鎵绀 ...
绛旓細1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html銆2銆佸湪index.html涓殑鏍囩涓紝杈撳叆css浠ｇ爜锛歭i {height: 50px;background: url(small3.png)} li:hover {background: url(small2.png)} 3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃舵樉绀哄嚭浜嗚儗鏅鍥剧墖銆4銆佸皢榧犳爣绉诲姩鍒發i鏍囩鑳屾櫙鍥剧墖涓婃柟锛屾鏃惰儗鏅...
绛旓細閫氳繃css锛歜ackground-image璇彞璁剧疆鑳屾櫙銆俠ackground-image 灞炴т細鍦ㄥ厓绱犵殑鑳屾櫙涓缃竴涓浘鍍忋傛牴鎹 background-repeat 灞炴х殑鍊硷紝鍥惧儚鍙互鏃犻檺骞抽摵銆佹部鐫鏌愪釜杞达紙x 杞存垨 y 杞达級骞抽摵锛屾垨鑰呮牴鏈笉骞抽摵銆傚垵濮嬭儗鏅浘鍍忥紙鍘熷浘鍍忥級鏍规嵁 background-position 灞炴х殑鍊兼斁缃傦紙1锛夌浉瀵圭殑鏂囦欢浣嶇疆锛氾紙2锛夋祴璇曚唬鐮...
