div+css如何改变背景图片位置 div+css中如何在背景图中指定位置控制按钮位置？
div+css\u5982\u4f55\u6539\u53d8\u80cc\u666f\u56fe\u7247\u4f4d\u7f6e\uff1fbackground-position:\u6570\u503c1 \u6570\u503c2\uff1b
\u6570\u503c1\u662f\u63a7\u5236\u5de6\u53f3\u5bbd\u5ea6\uff1b
\u6570\u503c2\u662f\u63a7\u5236\u4e0a\u4e0b\u9ad8\u5ea6\uff1b
\u5e95\u90e8\u53f3\u4e0b\u53ef\u4ee5\u5199\uff1abackground-position:right bottom\u3002
\u56fe\u7247
\u56fe\u7247\u662f\u6307\u7531\u56fe\u5f62\u3001\u56fe\u50cf\u7b49\u6784\u6210\u7684\u5e73\u9762\u5a92\u4f53\u3002\u56fe\u7247\u7684\u683c\u5f0f\u5f88\u591a\uff0c\u4f46\u603b\u4f53\u4e0a\u53ef\u4ee5\u5206\u4e3a\u70b9\u9635\u56fe\u548c\u77e2\u91cf\u56fe\u4e24\u5927\u7c7b\uff0c\u6211\u4eec\u5e38\u7528BMP\u3001JPG\u7b49\u683c\u5f0f\u90fd\u662f\u70b9\u9635\u56fe\u5f62\uff0c\u800cSWF\u3001CDR\u3001AI\u7b49\u683c\u5f0f\u7684\u56fe\u5f62\u5c5e\u4e8e\u77e2\u91cf\u56fe\u5f62\u3002
\u8fd9\u4e2a\u662f\u6211\u505a\u7684\u4e8b\u4f8b\u4ee3\u7801,\u5e0c\u671b\u5bf9\u4f60\u6709\u5e2e\u52a9,\u5b9a\u4f4d\u6700\u4e3b\u8981\u7528\u5230\u5c31\u662f\u8fd9\u4e2a"position" absolute\u4ee3\u8868\u7684\u662f\u7edd\u5bf9\u4f4d\u7f6e,\u8fd8\u6709\u4e00\u4e2a\u76f8\u5bf9\u4f4d\u7f6erelative.\u5177\u4f53\u4f4d\u7f6e\u7684\u8bbe\u7f6e\u5c31\u8981\u770bmargin\u4e86\uff0c\u5206\u522b\u6709left\right\top\bottom\u56db\u4e2a\u4f4d\u7f6e.\u81ea\u5df1\u518d\u8c03\u8c03\u5c31\u597d\u4e86.
background:url(背景图路径) left bottom;/*left 和 bottom 改为 top、right、center看看有什么变化*/
background:url(背景图路径) 0 10px;/*改改里面数值试试*/
background:url(背景图路径) 50% 0;/*改改里面数值试试*/
background-position:数值1 数值2；
数值1是控制左右宽度
数值2是控制上下高度
底部右下可以写：background-position:right bottom;
background-position:left bottom; 第一个水平left 第二个垂直bottom。 也可以写具体数值：background-position:36px 48px; 记住先后水平垂直顺序。
background-position:bottom left;
绛旓細CSS鑳芥洿鎹㈢殑鍥剧墖锛屽彧鑳藉瓨鍦ㄤ簬鏍峰紡涓傛墍浠ワ紝杩欎釜鍥剧墖涔熷彧鑳芥槸鑳屾櫙鍥剧墖銆備竴鑸槸缁撳悎锛歨over鏉ュ疄鐜扮殑銆備緥濡傦細.mydiv{ background:鍥剧墖1 no-repeat;height:100px;widht:100px;} .mydiv:hover{ background:鍥剧墖2 no-repeat;} 杩欐牱灏卞疄鐜颁簡鍥剧墖1鍜屽浘鐗2鐨勯紶鏍囩Щ涓婂幓鐨勫垏鎹侰SS灞傚彔鏍峰紡琛(鑻辨枃鍏ㄧО锛...
绛旓細<style>body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,p,th,td,table,textarea,select{margin:0;padding:0;}ol,ul{list-style:none;}img,a img{border:0;}.alC{text-align:center;}body{font:12px Arial;color:#666; background:url(鑳屾櫙鍥剧墖鍦板潃) 50% 0 no-repeat;...
绛旓細濡傛灉鎯鏀瑰彉css鑳屾櫙鍥剧墖锛屼竴鑸殑鍋氭硶鍙兘浣跨敤css婊ら暅锛沜ss婊ら暅涓昏鍖呮嫭锛歋peia婊ら暅 鐏板害鍥炬护闀 楂樻柉妯＄硦婊ら暅 鍙嶈壊婊ら暅 楗卞拰搴︽护闀 瀵规瘮搴︽护闀 浜害婊ら暅 鑹茬浉鏃嬭浆婊ら暅 闃村奖婊ら暅 css婊ら暅鍦ㄦ祻瑙堝櫒鍏煎鏄瘮杈冨潙鐖圭殑闂锛宨e娴忚鍣ㄦ湁鑷繁涓濂楁护闀渇ilter瀹舵棌锛屽熀鏈墍鏈塱e鍐呮牳娴忚鍣ㄩ兘鏀寔锛宖f...
绛旓細http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>liuxing test</title><style type="text/css"> .divbgpic{ background-image:url('jquery/jquery-ui-1.9.1.custom/jquery-ui-1.9.1.custom/css/base/images...
绛旓細div鑳屾櫙鍥剧墖澶у皬闅廳iv澶у皬鍙樺寲鑰屽彉鍖,鍙互鎸囧畾鑳屾櫙鍥剧墖鐨勫昂瀵告潵瀹炵幇锛岃缁嗘柟娉曞涓嬶細CSS鏍峰紡鏂囦欢涓紝閽堝img鏍囩娣诲姞锛歜ackground-size灞炴 璇︾粏鎿嶄綔濡傚浘锛歜ackground-size锛歝over灞炴х殑浣滅敤璇﹁В锛氫粬鐨勪綔鐢ㄦ槸锛屾妸鑳屾櫙鍥惧儚鎵╁睍鑷宠冻澶熷ぇ锛屼互浣胯儗鏅浘鍍忓畬鍏ㄨ鐩栬儗鏅尯鍩燂紝鑳屾櫙鍥惧儚鐨勬煇浜涢儴鍒嗕篃璁告棤娉曟樉绀哄湪鑳屾櫙瀹氫綅...
绛旓細閫氳繃css锛歜ackground-image璇彞璁剧疆鑳屾櫙銆俠ackground-image 灞炴т細鍦ㄥ厓绱犵殑鑳屾櫙涓缃竴涓浘鍍忋傛牴鎹 background-repeat 灞炴х殑鍊硷紝鍥惧儚鍙互鏃犻檺骞抽摵銆佹部鐫鏌愪釜杞达紙x 杞存垨 y 杞达級骞抽摵锛屾垨鑰呮牴鏈笉骞抽摵銆傚垵濮鑳屾櫙鍥惧儚锛堝師鍥惧儚锛夋牴鎹 background-position 灞炴х殑鍊兼斁缃傦紙1锛夌浉瀵圭殑鏂囦欢浣嶇疆锛氾紙2锛夋祴璇曚唬鐮...
绛旓細a:hover{ background:#000;}
绛旓細.divX{ background:silver;}
绛旓細.imgDiv{ width:500px;height:500px;background-image:url('../images/index.jpg');-moz-background-size: 100% 100%;-o-background-size: 100% 100%;-webkit-background-size: 100% 100%;background-size: 100% 100%;-moz-border-image: url(./btn.png) 0;background-repeat:no-repeat...
绛旓細鍏跺疄杩欑灏辨槸涓涓鍥剧墖骞抽摵锛屽湪鍔犱釜杈规鐨勬晥鏋滐紝涓婁笅涓ょ鏂瑰悜鐨勬笎鍙樺浘鐗囷紝鍚堟垚涓涓浘鐗囷紝鐒跺悗鐢鑳屾櫙瀹氫綅background-position:鍘诲畾浣嶏紝鐒跺悗妯悜骞抽摵锛岃繖涓繖鏍疯寰堥毦璁茬殑鏄庣櫧锛岀敤鐨勬槸鍚屼竴涓浘鐗囨病閿欙紝浣嗘槸瀹氫綅涓嶄竴鏍枫傚畾浣嶆墠鏄叧閿紝浣犲師鐞嗘噦鐨勮瘽锛屽仛杩欎釜涔熷緢绠鍗 ...
