天天看點

怎麼設定背景圖檔大小

可以通過cover和baicontain來對圖檔進行伸縮。

文法:

background-size:auto;/* 預設值,du不改變背景圖檔zhi的高度和寬度 */

background-size:100px 50px;/* 第一個值為寬,第二個dao值為高,當設定一個值時,将其作為圖檔寬度來等比縮放 */

background-size:10%;/* 0%~100%之間的任何值,将背景圖檔寬高按百分比顯示,當設定一個值的時候同也将其作為圖檔寬度來等比縮放 */

background-size:cover;/* 将背景圖檔等比縮放填滿整個容器 */

background-size:contain;/* 将背景圖檔等比縮放至某一邊緊貼容器邊緣 */

擴充資料:

CSS背景圖檔自适應、全屏、填充、拉伸

方法一:js控制

<div id="formbackground" style="position:absolute; width:100%; height:100%; z-index:-1">  
<img src="pictures/background.jpg" height="100%" width="100%"/>  </div>
<div id="formbackground" style="position:absolute; z-index:-1;"><img src="10.jpg" height="100%" width="100%"/></div>
<script type="text/javascript">
$(function(){
$('#formbackground').height($(window).height());
$('#formbackground').width($(window).width());
});
</script>      
.bg{  
background:url(http://wyz.67ge.com/wp-content/uploads/qzlogo.jpg);  
filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";  
-moz-background-size:100% 100%;  
background-size:100% 100%;  
}