網站建設
 
    收藏本站 
用戶ID/郵箱: 密 碼:
客戶中心 Customer service 您目前的位置:首 頁 > 客戶中心 > DIV+CSS 



DIV+CSS,網站建設DIV+CSS:css 如何讓背景圖片拉伸填充避免重復顯示

css 如何讓背景圖片拉伸填充避免重復顯示

如何讓背景圖片拉伸填充,這個問題聽起來似乎很簡單。但是很遺憾的告訴大家。
不是我們想的那么簡單。  比如一個容器(body,div,span)中設定一個背景。
這個背景的長寬值在css2.1之前是不能被修改的。  所以實際的結果是只能重復顯示,
所以出現了repeat,repeat-x,repeat-y,no-repeat這些屬性。
就是用來控制背景圖片的顯示的。所以一般用作背景圖片的有2類: 

1.是一整張大圖,尺寸和區域大小剛好吻合 
2.一個很小的條狀圖,通過repeat后,形成一個很規則的大圖背景。 
但是css3出現以后,這個情況被改善了。
background-size 屬性可以讓我們之前的希望成真。 
而且這個屬性在firefox,chrome,以及ie9上都可以使用。

具體使用方法如下: 
背景圖尺寸(數值表示方式): 

代碼如下:
#background-size{  
background-size:200px 100px;  
}  


背景圖尺寸(百分比表示方式): 

代碼如下:

#background-size2{  
background-size:30% 60%;  
}  


背景圖尺寸(等比擴展圖片來填滿元素,即cover值): 

代碼如下:

#background-size3{  
background-size:cover;  
} 
 


背景圖尺寸(等比縮小圖片來適應元素的尺寸,即contain值): 

代碼如下:

#background-size4{  
background-size:contain;  
}  


背景圖尺寸(以圖片自身大小來填充元素,即auto值): 

代碼如下:

#background-size5{  
background-size:auto;  
}  

  


上一條: 公司如何建立網站?建站前需要注意事項
下一條: 瀏覽器兼容問題與解決方法
相關文章
css常用屬性總結之 id和class的區別,使用類還是ID?
關于左邊固定,右邊自適應布局的響應式布局寫法
html實現 頁面禁止右鍵 禁止復制 禁止圖片拖動 禁止復制和剪切
推廣經驗分享
其它
網站建設資源
常見問題
網站知識
首頁關于我們業務范圍新聞資訊成功案例客服中心聯系我們深圳網站建設網站優化付款帳戶
COPYRIGHT(C) 2005-2019 亞網互聯·中國 版權所有 ALL RIGHTS RESERVED (粵ICP備15005241號)
深圳網站建設公司地址:深圳市寶安區龍華民治大道東明大廈15樓 1529-1531 室   E-Mail:[email protected]  
公司電話:0755-89812581(8線)  
深圳市亞網科技有限公司 深圳網站建設常年法律顧問:朱運德律師
888真人游戏平台 内蒙古11选五走势图真准网 广东快乐10分人工计划 十一选五前三组复式表 破解重庆幸运农场 股票配资平台软件 江苏11选5追号 佳永配资 排列五中奖去哪领奖 陕西11选5预测免费推荐 11选5任六万能组合包中