網站建設
                                                       
                                                          收藏本站 
                                                      用戶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線)  
                                                      深圳市亞網科技有限公司 深圳網站建設常年法律顧問:朱運德律師
                                                      四川金7乐18061809期

                                                                                                                                                              山东体育在线直播观看 总进球奖金怎么算 秒速快3走势app 通比牛牛娱乐app下载 新时时历史记录 六后釆今晚开奖资料 浙江麻将 官方高频彩开奖直播 江小白特肖 体彩竞彩胜平负结果 广东十一选五平台代理 下载APP广东11选5助手 国彩开奖 极速时时论坛 20选走势图 安徽时时十一选五结果走势图