CSS问题，我把一个大图片做背景，剧中了
CSS\u6837\u5f0f\u8868\u63a7\u5236\u80cc\u666f\u56fe\u7247\u5927\u5c0f\u53ef\u4ee5\u901a\u8fc7background-size\u5c5e\u6027\u6765\u8bbe\u5b9a\u80cc\u666f\u56fe\u7247\u7684\u5927\u5c0f\u3002\u5b83\u53ef\u4ee5\u662f\u50cf\u7d20\uff08px\uff09\u6216\u8005\u662f\u767e\u5206\u6bd4(%)\uff0c\u4e3e\u4f8b\u8bf4\u660e\uff1abackground-size:950px* 200px\u8fd9\u8868\u793a\u628a\u80cc\u666f\u56fe\u7247\u5927\u5c0f\u8c03\u6574\u4e3a\u5bbd\u5ea6950\u50cf\u7d20\uff0c\u9ad8\u5ea6200\u50cf\u7d20\u3002
1\u3001background-size\u7684\u8bed\u6cd5\u8bf4\u660e\uff1a
(1)\u5c5e\u6027\u540d:background-size
(2)\u5c5e\u6027\u503c:\u5176\u4e2d bg-size = [|| auto ]{1,2} | cover | contain
(3)\u521d\u59cb\u503c:auto auto
(4)\u5e94\u7528\u4e8e:\u6240\u6709\u5143\u7d20
(5)\u7ee7\u627f\u6027:\u65e0
(6)\u767e\u5206\u6bd4:\u540e\u9762\u4f1a\u8bf4\u660e
(7)\u8ba1\u7b97\u503c:\u6839\u636e\u6307\u5b9a
2\u3001\u4ee3\u7801\u8bf4\u660e\uff1a
/* \u4e00\u4e2a\u503c: \u8fd9\u4e2a\u503c\u6307\u5b9a\u56fe\u7247\u5bbd\u5ea6\uff0c\u7b2c\u4e8c\u4e2a\u503c\u4e3aauto */
background-size: auto
background-size: 50%
background-size: 3em
background-size: 12px
/* \u4e24\u4e2a\u503c: \u7b2c\u4e00\u4e2a\u503c\u6307\u5b9a\u56fe\u7247\u7684\u5bbd\u5ea6\uff0c\u7b2c\u4e8c\u4e2a\u503c\u6307\u5b9a\u56fe\u7247\u7684\u9ad8\u5ea6 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto
/*\u591a\u91cd\u80cc\u666f\uff0c\u7528\u9017\u53f7\u9694\u5f00\uff0c\u5728CSS\u8bed\u6cd5\u4e2d\u51e1\u8bed\u6cd5\u540e\u8ddf*\u6216\u8005#\uff0c\u90fd\u662f\u53ef\u4ee5\u65e0\u9650\u91cd\u590d\u7684\uff0c\u4f46\u5fc5\u987b\u7528\u9017\u53f7\u9694\u5f00\u3002 */
background-size: auto, auto /* \u8bf7\u533a\u522b\u4e8ebackground-size: auto auto*/
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain
background-size: inherit
\u6269\u5c55\u8d44\u6599\uff1a
\u80cc\u666f\u91cd\u590d\uff1a
\u5982\u679c\u9700\u8981\u5728\u9875\u9762\u4e0a\u5bf9\u80cc\u666f\u56fe\u50cf\u8fdb\u884c\u5e73\u94fa\uff0c\u53ef\u4ee5\u4f7f\u7528 background-repeat \u5c5e\u6027\u3002
\u5c5e\u6027\u503c repeat \u5bfc\u81f4\u56fe\u50cf\u5728\u6c34\u5e73\u5782\u76f4\u65b9\u5411\u4e0a\u90fd\u5e73\u94fa\uff0c\u5c31\u50cf\u4ee5\u5f80\u80cc\u666f\u56fe\u50cf\u7684\u901a\u5e38\u505a\u6cd5\u4e00\u6837\u3002repeat-x \u548c repeat-y \u5206\u522b\u5bfc\u81f4\u56fe\u50cf\u53ea\u5728\u6c34\u5e73\u6216\u5782\u76f4\u65b9\u5411\u4e0a\u91cd\u590d\uff0cno-repeat \u5219\u4e0d\u5141\u8bb8\u56fe\u50cf\u5728\u4efb\u4f55\u65b9\u5411\u4e0a\u5e73\u94fa\u3002
\u80cc\u666f\u56fe\u50cf\u5c06\u4ece\u4e00\u4e2a\u5143\u7d20\u7684\u5de6\u4e0a\u89d2\u5f00\u59cb\u3002\u5982\u4e0b\uff1a
body{background-image: url(/i/eg_bg_03.gif); background-repeat: repeat-y;}
\u80cc\u666f\u5b9a\u4f4d\uff1a
\u53ef\u4ee5\u5229\u7528 background-position \u5c5e\u6027\u6539\u53d8\u56fe\u50cf\u5728\u80cc\u666f\u4e2d\u7684\u4f4d\u7f6e\u3002
\u4e0b\u9762\u7684\u4f8b\u5b50\u5728 body \u5143\u7d20\u4e2d\u5c06\u4e00\u4e2a\u80cc\u666f\u56fe\u50cf\u5c45\u4e2d\u653e\u7f6e\uff1a
body{background-image:url('/i/eg_bg_03.gif');background-repeat:no-repeat; background-position:center;}
\u4e3a background-position \u5c5e\u6027\u63d0\u4f9b\u503c\u6709\u5f88\u591a\u65b9\u6cd5\u3002\u9996\u5148\uff0c\u53ef\u4ee5\u4f7f\u7528\u4e00\u4e9b\u5173\u952e\u5b57\uff1atop\u3001bottom\u3001left\u3001right \u548c center\u3002\u901a\u5e38\uff0c\u8fd9\u4e9b\u5173\u952e\u5b57\u4f1a\u6210\u5bf9\u51fa\u73b0\uff0c\u4e0d\u8fc7\u4e5f\u4e0d\u603b\u662f\u8fd9\u6837\u3002\u8fd8\u53ef\u4ee5\u4f7f\u7528\u957f\u5ea6\u503c\uff0c\u5982 100px \u6216 5cm\uff0c\u6700\u540e\u4e5f\u53ef\u4ee5\u4f7f\u7528\u767e\u5206\u6570\u503c\u3002\u4e0d\u540c\u7c7b\u578b\u7684\u503c\u5bf9\u4e8e\u80cc\u666f\u56fe\u50cf\u7684\u653e\u7f6e\u7a0d\u6709\u5dee\u5f02\u3002
\u53c2\u8003\u8d44\u6599\u6765\u6e90\uff1aw3school\uff1aCSS \u80cc\u666f
\u662f\u7684,\u8fd9\u4e2a\u5f88\u5bb9\u6613\u5224\u65ad\u7684,\u4f60\u7528\u4e2a\u80cc\u666f\u56fe\u7247\u8bd5\u9a8c\u4e0b\u5c31\u660e\u786e\u4e86;
\u4e0d\u8fc7\u6700\u597d\u628ax y\u90fd\u5199\u51fa\u6765,\u907f\u514d\u4e0d\u5fc5\u8981\u7684\u95ee\u9898,\u6709\u65f6\u5019\u4f60\u5c11\u5199\u4e00\u4e2a\u6216\u4e0d\u5199x y\u53ef\u80fd\u4f1a\u51fa\u73b0\u95ee\u9898\u7684;
一般来说背景图是没办法改变大小的,和原图比例一致,不可缩放.
如果用CSS3倒是可以实现这样的效果,网上搜搜"background-size"吧
设置图片宽度为width:100%
即可
更多css布局教程，请访问：爱微网
绛旓細鐒跺悗鍐嶇湅浣犵殑灏忕煩褰㈢殑浣嶇疆锛屽亣璁句綘鐨勯〉闈㈠彧鏈夎繖涔堜竴涓厓绱狅紝閭ｄ箞鐩存帴璁惧畾杩欎釜灏忕煩褰㈢殑瀹藉害锛岀劧鍚css涓簃argin:0 auto;濡傛灉涓婅竟杩樻湁杈硅窛锛屼綘鍙互鑷繁璋冩暣鏁板笺傚鏋滈〉闈㈤櫎浜嗗皬鐭╁舰杩樻湁鍏朵粬鐨勫厓绱狅紝鍏蜂綋鎯呭喌鍏蜂綋鍒嗘瀽锛岃鐪嬩綘鐨勫叿浣撳竷灞鍟︺傚叾瀹炶繖涓儗鏅浘鐗囧拰杩欎釜灏忕煩褰笉浼氱浉浜掑奖鍝嶇殑鍚с
绛旓細鍙互杩欐牱 鏀句袱涓眰 澶栭潰涓涓眰 閲岄潰鍦ㄥ寘涓涓眰 閲岄潰杩欎釜灞傚氨鏀鍥剧墖 background:url("xxx") no-repeat;骞朵笖灞傚眳涓 margin:0px auto;澶栭潰杩欎釜灞傝儗鏅氨璁剧疆鍏ㄥ眬鐨勯鑹 璁剧疆鎴愯窡 閭ｅ紶鍥 寰堝鍚堢殑棰滆壊灏眔k
绛旓細瑕佹槸鑳屾櫙鍥剧墖鑷姩缂╂斁鏄笉琛岀殑锛圥S;background-size鍏煎鎬т笉濂斤紝涓嶆帹鑽愪娇鐢級锛屼綘闇瑕佺敤鍥剧墖锛岀劧鍚庡畾浣嶆潵瀹炵幇鏁堟灉銆傛妸鍥剧墖瀹藉害璁句负100%锛涢珮搴﹁涓篴uto銆
绛旓細閮借鍔爌osition:absolute; 鑳屾櫙鐨剒-index璁剧疆鐨勬暟瀛楄姣斾笂闈㈠叚涓殑灏忥紱 濡傦細鑳屾櫙鐨剒-index:10;涓婇潰鐨勫叚涓负z-index:11;
绛旓細杩欎釜搴旇鏄冭檻缃戠珯瀹為檯杩愯鐨勬椂鍊欏鎴风鐨鍥剧墖鍔犺浇鏃堕棿闂锛屾斁鍦ㄤ竴寮犲浘鐗囦笂鐢ㄥ畾浣嶇殑鏂规硶锛屽彧闇瑕佷粠鏈嶅姟鍣ㄤ笅杞戒竴寮犲浘鐗囷紝 缂撳瓨鍦ㄦ湰鍦帮紝澶氫釜鍦版柟鍙互鐢紝鍑忓皯浜嗘瘡寮犲浘鐗囬兘瑕佷笅杞藉姞杞界殑鏃堕棿锛
绛旓細闇瑕佸噯澶囩殑鏉愭枡鍒嗗埆鏈夛細鐢佃剳銆佹祻瑙堝櫒銆乭tml缂栬緫鍣ㄣ1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html銆2銆佸湪index.html涓殑鏍囩涓紝杈撳叆css浠ｇ爜锛歜ody{background: url(image.jpg) no-repeat;background-size: 200px 200px; }銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃惰儗鏅鍥剧墖鎴愬姛琚瀹氫负200*20...
绛旓細閫氳繃璁剧疆background-size 鐨勫睘鎬ц缃鍥剧墖澶у皬銆css璇硶锛歜ackground-size: length|percentage|cover|contain;涓銆乭tml浠ｇ爜锛氫簩銆佺畝鍗曠殑CSS锛缁檅ody鍔犱笂鑳屾櫙璁剧疆锛氫笁銆佹晥鏋滃涓嬶細
绛旓細濡傛灉浣犲浘鐗囩殑瀹藉害鏄 1249px 浣犲彲浠ヨ繖鏍峰仛 鍐涓涓 div 璁惧畾瀹冪殑 width:1249px 楂樺嵆涓哄浘鐗囩殑楂樺害 鐒跺悗margin:0 auto 璁╄繖涓鍥剧墖浣滀负杩欎釜div鐨勮儗鏅 鑳屾櫙鐨勪綅缃産ackground-position: left top
绛旓細鍦ㄦ瘡涓猣rame鐨css涓缃産ody鐨刡ackground鏍峰紡锛屾瘮濡 frame1锛歜ody {background:url(back.jpg) no-repeat 0 0 fixed} /*杩欎釜鑳屾櫙鍥炬槸浠0,0浣嶇疆澶勫紑濮嬫樉绀虹殑锛岃繖鏄竴鑸殑姝ｅ父鏄剧ず鏂瑰紡*/ frame2锛歜ody {background:url(back.jpg) no-repeat -300px 0 fixed} /*杩欎釜鑳屾櫙鍥炬槸浠-300,0鍧愭爣...
绛旓細>鎷涚敓灏变笟 鍥介檯鍖栧姙瀛 瀛︾敓宸ヤ綔 鍦╞ody閲屽姞鑳屾櫙锛屼綘鐨勪唬鐮佹庝箞杩炰釜body閮芥病鏈夈併併
