html中背景图片,鼠标移动上去之后切换为另一个图片 CSS鼠标移动到我的连接图片的时候更换另一张图片？
\u5982\u679c\u5728html\u4e2d\u8bbe\u7f6e\u9f20\u6807\u653e\u5728\u56fe\u4e0a\u56fe\u7247\u5c31\u6362\u6210\u53e6\u4e00\u4e2a\u5199\u4e86\u4e2a\u4f8b\u5b50:
\u7ed9img\u6807\u7b7e\u52a0\u4e2a\u5c5e\u6027:border="0"\u540e,\u5c31\u4e0d\u4f1a\u6709\u8fb9\u6846\u4e86
\u56fe\u7247\u7684\u9ad8\u5ea6\u548c\u5bbd\u5ea6\u53ef\u4ee5\u4e0d\u7528\u8bbe\u5b9a,\u53ea\u662f\u8bbe\u7f6e\u4e86\u9f20\u6807\u7684\u4e24\u79cd\u72b6\u6001,\u5207\u6362\u7684\u5176\u5b9e\u662f\u56fe\u7247\u7684\u5730\u5740src
background-img:url(a.jpg);
}
绛旓細2銆佹埅鍥句繚瀛樹笅鏉ヤ箣鍚庯紝鍦ㄧ數鑴戜笂鎵惧埌鍒氬垰淇濆瓨鐨勭綉椤鍥剧墖锛骞跺彸閿墦寮鑿滃崟銆3銆佸湪璺冲嚭鐨勮彍鍗曠晫闈腑锛屾壘鍒拌缃负妗岄潰鑳屾櫙锛屽苟鐐瑰嚮鍗冲彲銆俬builder鎬庝箞璁剧疆缃戦〉鑳屾櫙鍥剧墖锛熷彲浠ラ氳繃缁檅ody鍔燽ackground-image鐨勬牱寮忚繘琛岃缃儗鏅浘鐗 濡備綍璁剧疆缃戦〉鑳屾櫙锛1銆侀鍏堟墦寮Atom缂栬緫鍣ㄥ鍏ラ」鐩枃浠跺す锛屽厛鍒涘缓涓涓猧ndex.html 鐨...
绛旓細杩欎釜鏄洜涓烘牱寮忎紭鍏堢骇鐨勯棶棰橈紝鍙鎶婃牱寮忔洿鎹㈡垚 HTML閮ㄥ垎:<a href="#" id="pic2"> </a> CSS閮ㄥ垎:pic2 a{background:url(image/frontPageAd_anniversary_txt.jpg) 0 0 no-repeat; width:465px; height:262px; display:block;"} pic2 a:hover{ background:url(../image/澶嶄欢 frontPageAd...
绛旓細杩欎箞绠鍗曠殑闂锛 杩欎釜鏄疌SS璁剧疆鐨勶紝 璁剧疆璇D 鎴栬匔LASS涓 榧犳爣鍦涓婇潰鐨鏃跺鑳屾櫙棰滆壊璺熷瓧浣撻鑹插氨琛屼簡锛乤:hover{background:#000;opacity:0.5;color:#fff;display:block;} 杩欓噷鍙槸鎶婂叏閮ㄩ兘鍐欏湪涓璧蜂簡锛 鍏蜂綋杩樿鏍规嵁浣犺〃鏍肩殑閫夋嫨鍣ㄦ潵鍐欙紒 瑕佽缃忔槑搴 灏辩敤CSS鐨刼pacity璁剧疆锛 瀛椾綋棰滆壊灏辨槸鐢...
绛旓細涓轰簡鎻愬崌瑙嗚鏁堟灉锛屾垜浠繕闇瑕佷负杩欎簺div娣诲姞鍚堥傜殑鏍峰紡銆傛渶鍚庯紝鍙渶鍦ㄦ祻瑙堝櫒涓墦寮杩欎釜HTML鏂囦欢锛屼綘浼氱湅鍒板浘鐗囧凡缁忔垚鍔熷湴浣滀负鑳屾櫙鏄剧ず鍑烘潵浜嗐傛荤粨鏉ヨ锛孒TML鎻掑叆鑳屾櫙鍥剧墖鐨姝ラ鍖呮嫭鎸囧畾鍥剧墖璺緞銆侀夋嫨鎻掑叆鏂瑰紡锛圚TML鎴朇SS锛夈佽缃浉鍏冲睘鎬т互鍙婅皟鏁存牱寮忋傞氳繃浠ヤ笂姝ラ锛屼綘灏辫兘杞绘澗瀹炵幇鑳屾櫙鍥剧墖鐨勬坊鍔犱簡銆
绛旓細鍦ㄧ綉椤靛埗浣滀笂鍙互鐢↗avascript浠ｇ爜銆傚湪鍥剧墖涓婂崟鍑榧犳爣锛岃幏鍙栧浘鐗囩殑鍘熷灏哄澶у皬锛屽彉閫氫竴涓嬫垜浠彲浠ュ疄鐜拌鍥剧墖闅忕綉椤电殑澶у皬鑰岃嚜鍔ㄩ傚簲锛屾垜浠彲浠ュ垽鏂鏋滃浘鐗囪秴鍑鸿瀹氬ぇ灏忥紝鍒欏己鍒跺帇缂鍥剧墖锛杩愯涓涓嬬湅鏁堟灉鍚с<title>鍦ㄥ浘鐗囦笂鍗曞嚮鑾峰彇鍥剧墖鍘熷澶у皬</title> <img src="/images/logo.gif" width=200 height=80...
绛旓細浠ｇ爜涓衡渄iv{width:100px;height:100px;background:#ccc;}鈥濓細3銆佺粰div鏍囩娣诲姞hover浼被锛岀劧鍚庢墦鍑轰竴涓┖鏍硷紝鍐嶈缃鏃秔鏍囩鐨勬樉绀烘牱寮忋備唬鐮佷负鈥渄iv:hoverp{display:block;}鈥濓紝杩欐浠ｇ爜鐨勬剰鎬濇槸锛屽綋榧犳爣鏀惧湪div涓婃椂锛屽皢p鏍囩鐨勬樉绀虹姸鎬佷粠闅愯棌鏀规垚鏄剧ず锛屾鏃秔鏍囩涓殑鏂囧瓧灏变細鏄剧ず鍑烘潵锛
绛旓細3銆佺劧鍚庢柊寤轰竴涓猚ss鏂囦欢锛屽鍥撅紱4銆佽繖閲岀粰body鏍囩璁剧疆background-size灞炴э紝濡傛灉鏍囩鏄痙iv灏卞啓div锛岀劧鍚庡彲浠ヨ缃搴﹀拰楂樺害锛5銆佸鍥炬墍绀猴紝鍦╪ew_file.html閲岄潰缂栬緫锛<link href="css/1.css" type="text/css" rel="stylesheet"/>锛屽氨鍙互璁剧疆鑳屾櫙鍥剧墖鐨勫ぇ灏忎簡锛6銆佹渶鍚庡湪娴忚鍣ㄤ腑棰勮涓涓嬶紝濡傚浘涓...
绛旓細<img src="xxx.jpg" width="100px" height="100px" /> 浠ｇ爜璇存槑锛氳繖鏄湪缃戦〉涓彃鍏ヤ竴鍓浘鍍忥紝鑳借皟鏁村浘鍍忓ぇ灏忥紝鑳芥媺浼稿浘鍍忥紝浣嗘槸涓嶈兘骞抽摵鍥惧儚锛屽浘鍍忚鍗犵敤椤甸潰鐨勭┖闂寸殑锛屼竴鑸儏鍐典笅锛屾枃瀛椾笉鑳藉湪杩欐牱鐨勫浘鍍忎笂闈備唬鐮佹爣绛捐В閲婏細1銆<img> 鏍囩瀹氫箟鍥惧儚銆2銆乻rc 锛氳鏄剧ず鐨勫浘鍍忕殑 URL锛鍥剧墖鍦板潃锛夈
绛旓細鐢佃剳銆佹祻瑙堝櫒銆乭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椤甸潰锛屾鏃舵垚鍔熷湪html鐨琛ㄥ崟涓坊鍔犱簡鑳屾櫙鍥剧墖銆
绛旓細1銆侀鍏堟墦寮Atom缂栬緫鍣ㄥ鍏ラ」鐩枃浠跺す锛屽厛鍒涘缓涓涓猧ndex.html鐨鏂囦欢銆傚畾涔変竴涓媓tml鏂囦欢鐨勪富淇℃伅锛2銆佺劧鍚庡～鍐欒嚜宸辩殑缃戦〉鍐呭锛 璁剧疆涓涓嬫牱寮忥紝鐩存帴鍦╞ody鍚庨潰鍔犱笂background="鍥剧墖鍚嶅瓧"鍗冲彲鎻掑叆鍥剧墖锛3銆佹渶鍚庢潵鍒版祻瑙堝櫒锛屽埛鏂颁竴涓嬬綉椤碉紝杩欐牱灏变細鏄剧ず鑳屾櫙浜嗭細...
