css 如何讓背景圖片拉伸填充避免重復顯示
發(fā)布時間：2013-07-11 16:47:31 作者：佚名 
我要評論
我要評論但是css3出現(xiàn)以后，這個重復顯示的情況被改善了。background-size 屬性可以讓我們之前的讓背景圖片拉伸填充的希望成真，具體使用方法如下感興趣的朋友可以參考下哈，希望對大家有所幫助
如何讓背景圖片拉伸填充，這個問題聽起來似乎很簡單。但是很遺憾的告訴大家。不是我們想的那么簡單。
比如一個容器（body,div,span）中設定一個背景。這個背景的長寬值在css2.1之前是不能被修改的。
所以實際的結果是只能重復顯示，所以出現(xiàn)了repeat,repeat-x,repeat-y,no-repeat這些屬性。就是用來控制背景圖片的顯示的。所以一般用作背景圖片的有2類：
1.是一整張大圖，尺寸和區(qū)域大小剛好吻合
2.一個很小的條狀圖，通過repeat后，形成一個很規(guī)則的大圖背景。
但是css3出現(xiàn)以后，這個情況被改善了。background-size 屬性可以讓我們之前的希望成真。
而且這個屬性在firefox，chrome，以及ie9上都可以使用。
具體使用方法如下：
背景圖尺寸（數(shù)值表示方式）：
#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;
}
比如一個容器（body,div,span）中設定一個背景。這個背景的長寬值在css2.1之前是不能被修改的。
所以實際的結果是只能重復顯示，所以出現(xiàn)了repeat,repeat-x,repeat-y,no-repeat這些屬性。就是用來控制背景圖片的顯示的。所以一般用作背景圖片的有2類：
1.是一整張大圖，尺寸和區(qū)域大小剛好吻合
2.一個很小的條狀圖，通過repeat后，形成一個很規(guī)則的大圖背景。
但是css3出現(xiàn)以后，這個情況被改善了。background-size 屬性可以讓我們之前的希望成真。
而且這個屬性在firefox，chrome，以及ie9上都可以使用。
具體使用方法如下：
背景圖尺寸（數(shù)值表示方式）：
復制代碼
代碼如下:#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;
}
相關文章
CSS3 Text Stroke(文本描邊)和text-fill-color(文本填充色)調試工具
這是一款可在線調試并預覽CSS3 Text Stroke(文本描邊)和text-fill-color(文本填充色)效果的工具。右側具有實時調試并顯示預覽效果的功能，同時能夠實時生成對應的css3效果2016-05-31
CSS3 Animation 制作按鈕鼠標滑過動畫填充背景特效源碼(13種)
CSS3 Animation 制作按鈕鼠標滑過動畫填充背景特效源碼(13種)是一款共有13種動畫填充背景效果，均由按鈕的偽元素和CSS3 animation來制作完成，效果非常棒，喜歡的朋友前來2016-04-12- 這篇文章主要介紹了CSS將文字描邊及填充文字顏色的方法,分別為text-stroke和text-fill-color屬性的使用方法講解,注意瀏覽器的兼容問題,需要的朋友可以參考下2016-03-07
- 想實現(xiàn)這樣的一個效果兩個div左邊的寬度固定、右邊的自動填滿，實現(xiàn)方法很簡單，下面為大家簡單介紹下，感興趣的朋友可以參考下2013-08-18
CSS教程:盒模型(BOX Model)-CSS教程-網頁制作-網頁教學網
如果想熟練掌握DIV和CSS的布局方法，首先要對盒模型有足夠的了解。每個HTML元素都可以看作一個裝了東西的盒子，盒子里面的內容到盒子的邊框之間的距離即填充（padding2008-10-17基于CSS實現(xiàn)每列四行加載完一列后數(shù)據(jù)自動填充到下一列
本文是小編給大家分享的基于基于CSS實現(xiàn)每列四行加載完一列后數(shù)據(jù)自動填充到下一列的實現(xiàn)關鍵代碼，非常不錯，具有參考借鑒價值，感興趣的朋友一起看下吧2016-06-30
