我想在body里放一个背景图片,浏览的时候填充整个屏幕,请问这样的JS代码或CSS代码怎么写? html 如何让背景图片充满全图,就是拉伸
\u7f51\u9875\u8bbe\u8ba1\u4e2d\u600e\u4e48\u8ba9\u4e00\u5f20\u56fe\u7247\u586b\u5145\u6ee1\u6574\u4e2a\u753b\u9762 \u6c42\u4ee3\u78011\u3001\u5982\u679c\u697c\u4e3b\u53ea\u662f\u5c06\u5176\u5f53\u505a\u4e00\u5f20\u56fe\u7247\u663e\u793a\uff0c\u53ef\u4ee5\u901a\u8fc7css\u63a7\u5236\uff0c\u5982img{width:100%;height:100%;}.
\u5426\u5219\u9700\u8981\u5c06\u5176\u4f5c\u4e3a\u7f51\u9875\u80cc\u666f\u7684\u8bdd\u53ef\u4ee5\u8bd5\u8bd5\u5982\u4e0b\u65b9\u6cd5\uff1a
2\u3001\u5982\u679c\u8fd9\u5f20\u56fe\u7247\u4e3a\u80cc\u666f\u56fe\u7247\u7531\u4e8e\u80cc\u666f\u56fe\u7247\u4e0d\u5177\u6709\u4f38\u7f29\u6027\uff0c\u53ea\u80fd\u901a\u8fc7\u522b\u7684\u65b9\u6cd5\u7ed5\u7740\u89e3\u51b3\uff0c\u5728ie\u4e2d\u53ef\u4ee5\u7528<body
style="filter:progid:dximagetransform.microsoft.alphaimageloader(src='1.jpg',sizingmethod='scale')">\uff0c\u5b9e\u73b0\u80cc\u666f\u62c9\u4f38\u94fa\u6ee1\u6574\u4e2a\u6d4f\u89c8\u5668\uff0c\u4f46\u5176\u5b83\u7684\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u3002
\u8fd9\u65f6\u53ef\u4ee5\u62d0\u4e2a\u5f2f\uff0c\u8bbe\u7f6e\u4e24\u5c42div\uff0c\u5e95\u5c42div\u5f53\u505a\u80cc\u666f\u4f7f\u7528\uff0c\u653e\u7f6e\u4e00\u5f20\u56fe\u7247\u5373\u53ef\u3002
\u518d\u5c06\u7f51\u9875\u5185\u5bb9\u653e\u7f6e\u5230\u7b2c\u4e8c\u5c42\u4e0a\u9875\u9762\u5185\u5bb9
3\u3001\u7f51\u9875\u80cc\u666f\u56fe\u7247\u9ed8\u8ba4\u60c5\u51b5\u4e0b\u662f\u91cd\u590d\u5e73\u94fa\u6ee1\u6574\u4e2a\u9875\u9762\u3002\u4e0a\u97622\u65b9\u6cd5\u662f\u8981\u6c42\u56fe\u7247\u4e0d\u91cd\u590d\uff0c\u4f46\u53c8\u5f97\u5360\u6ee1\u6d4f\u89c8\u5668\u6240\u91c7\u7528\u7684\u65b9\u6cd5\u3002
这样的话背景图片就会填充整个屏幕了
不过要说明的是,这是一个CSS3的属性,在很多浏览器里面都是不被支持的,你所希望的效果,目前来看,只有这个属性可以做到,否则就只能用一个足够大的图片做背景的方法来实现了。
另外 background-size:cover;还可以替换成 background-size:contain;使用cover的意思是把背景图片充满整个容器,而不考虑是不是可以看到完整的图片;使用contain的意思是在容器里完整显示图片,而不考虑容器是否被填满。
这个是用css设置背景图片
url :"../images"表示当前目录的上级目录下的目录
no-repeat:背景图片无重复。
background-size:背景图片大小,两个百分百表示长宽都占屏幕百分百,防止网页缩放或者屏幕大小不一样时没有铺满
你可以参考我下面的代码,不过需要说明,background-size是一个css3属性。
通常的处理方法是在body内放一个img标签,将这个img调整到合适的位置,
并通过position和z-index当做背景图使用。
body {
background-image:url(images/background.png);
background-size:100% 100%;
background-repeat:no-repeat;
}
<style type="text/css">
body{ background:url(你的背景图片);}
</style>
绛旓細CSS涓畾涔 backgroundcolor:red 鎴栬呮寚瀹歎RL
绛旓細鎴栬呬綘涔熷彲浠ヨ繖鏍疯瘯涓璇曪紝鐢ㄥ畾浣嶇殑鏂规硶瀹炵幇浣犵殑鏁堟灉 <body > <div style="position:absolute;z-index:-1;width:100%;height:100%;"> <img src="12.png" width="100%" height="100%" /> </div> </body> src閲岄潰鍔犱綘鐨鑳屾櫙鍥剧墖鍦板潃锛屽楂樺ぇ灏忎慨鏀 width銆乭eight 涓嶈鐩存帴鍦╞ody閲岄潰鍔狅紝浼...
绛旓細1銆乨w鏄緟鍔╁紑鍙戝伐鍏凤紝灏嗗厜鏍囧畾浣嶅埌鐣岄潰涓婏紝鐐瑰嚮椤甸潰灞炴э紝璁剧疆鑳屾櫙鍥剧墖銆傛渶缁堜篃鏄敓鎴愪竴涓瞔ss浠g爜銆2銆佺洿鎺ョ粰椤甸潰寮曞叆css鏂囦欢锛岀劧鍚庡body娣诲姞鑳屾櫙鍥惧儚css鏍峰紡锛宐ody{ background:url(xxx.jpg) no-repeat;}
绛旓細<body style="width:100%; height:100%;"> <style> body{ background:url(02.jpg) top left;background-size:100% 100%;overflow:hidden;} </style> </body> 鍏朵腑锛宱verflow灞炴ф槸璁惧畾瓒呭嚭body澶у皬鐨勫唴瀹归殣钘忎笉鏄剧ず锛岃繖鏍峰氨娑堝幓浜嗘粴鍔ㄦ潯銆俠ackground-size鏄缃鍥惧儚澶у皬锛屽悗闈袱涓煎垎鍒槸瀹藉害鍜...
绛旓細<body style="background-position: 0px 0px; background: url('bg.jpg'); background-repeat: repeat; background-attachment: scroll;"> 鎵璋撶殑鍔ㄦ佺綉椤碉紝鏄寚璺熼潤鎬佺綉椤电浉瀵圭殑涓绉嶇綉椤电紪绋嬫妧鏈傞潤鎬佺綉椤碉紝闅忕潃html浠g爜鐨勭敓鎴愶紝椤甸潰鐨勫唴瀹瑰拰鏄剧ず鏁堟灉灏卞熀鏈笂涓嶄細鍙戠敓鍙樺寲浜嗏斺旈櫎闈炰綘淇敼椤甸潰浠g爜...
绛旓細鎶婄綉椤电殑涓讳綋閮ㄥ垎璁剧疆涓涓浐瀹氱殑瀹藉害锛堥氬父鏄990鍍忕礌锛屾瘮濡傛窐瀹濆拰澶╃尗閮芥槸锛夛紝璁涓涓儗鏅鑹诧紙閫氬父鏄櫧鑹诧級锛岀劧鍚庡眳涓樉绀猴紝杩欐牱body鑳屾櫙鍥剧墖鐨勪腑闂撮儴鍒嗗氨浼氳鐧借壊瑕嗙洊浜嗐
绛旓細web涓皢鍥剧墖璁句负鑳屾櫙鍥剧墖鐨勪唬鐮佹槸锛<html> <body background="a.jpg"> </body> </html> 杩欐牱灏辨妸鍥剧墖a.jpg璁句负鑳屾櫙鍥剧墖浜嗐<body bgcolor="#CCCCCC"> 杩欎釜鏄妸鑳屾櫙璁炬垚鐏拌壊銆
绛旓細鎺ョ潃鏂板缓涓涓css鏂囦欢锛屽鍥撅紝灏忕紪鍛藉悕涓衡1.css鈥濄傝繖閲岀粰body鏍囩璁剧疆background-size灞炴э紝濡傛灉浣犵殑鏍囩鏄痙iv灏卞啓div锛岀劧鍚庡彲浠ヨ缃搴﹀拰楂樺害銆傚鍥炬墍绀猴紝鍦╪ew_file.html閲岄潰鍐欎笂杩欎釜锛<link href="css/1.css" type="text/css" rel="stylesheet"/>灏卞彲浠ヨ缃鑳屾櫙鍥剧墖鐨勫ぇ灏忎簡銆傛渶鍚庡湪娴忚鍣ㄤ腑...
绛旓細鎮ㄥソ锛屽叾瀹炶繖涓矾寰勬槸姝g‘鐨勶紝鍦╠鐩樻牴鐩綍鏀句笂2.jpg灏卞彲浠ユ甯告樉绀恒備箣鎵浠ヤ綘璇翠笉鑳藉姝e父鏄剧ず锛屽缓璁綘鍏堟妸缃戦〉淇濆瓨銆傛垨鑰呯洿鎺ヤ繚瀛樺埌d鐩橈紝鐒跺悗璺緞鐩存帴鍐2.jpg銆傚笇鏈涜兘澶熷府鍒版偍锛岃阿璋
绛旓細html鑳屾櫙鍥剧墖鎬庝箞娣诲姞?鍏蜂綋姝ラ濡備笅锛1.鎻掑叆鑳屾櫙鍥剧墖鏈変袱绉嶆柟娉曪紝涓绉嶆槸鐢╤tml鐨刬mg鏍囩锛屽彟涓绉嶆槸鍒╃敤css鐨刡ackground鏍囩鎻掑叆銆傚叿浣撴搷浣滄槸棣栧厛鏂板缓涓涓html鏂囦欢锛屽啓鍏ヤ袱涓猟iv锛屽垎鍒敤鏉ユ紨绀轰袱绉嶆柟娉曟彃鍏ユ爣绛;2.棣栧厛鏄敤html鏍囩鎻掑叆鍥剧墖锛岃繖閲岀洿鎺ュ湪img鏍囩涓娇鐢╯rc灞炴у氨鍙互鎻掑叆鍥剧墖璺緞灏辨垚鍔熶簡;3.鎺...