佳木斯湛栽影视文化发展公司

主頁 > 知識庫 > css 如何讓背景圖片拉伸填充避免重復顯示

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

熱門標簽:網站建設 美圖手機 百度競價點擊價格的計算公式 使用U盤裝系統 硅谷的囚徒呼叫中心 檢查注冊表項 智能手機 阿里云
如何讓背景圖片拉伸填充,這個問題聽起來似乎很簡單。但是很遺憾的告訴大家。不是我們想的那么簡單。
比如一個容器(body,div,span)中設定一個背景。這個背景的長寬值在css2.1之前是不能被修改的。
所以實際的結果是只能重復顯示,所以出現了repeat,repeat-x,repeat-y,no-repeat這些屬性。就是用來控制背景圖片的顯示的。所以一般用作背景圖片的有2類

1.是一整張大圖,尺寸和區(qū)域大小剛好吻合
2.一個很小的條狀圖,通過repeat后,形成一個很規(guī)則的大圖背景。

但是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 如何讓背景圖片拉伸填充避免重復顯示》,本文關鍵詞  ;如發(fā)現本文內容存在版權問題,煩請?zhí)峁┫嚓P信息告之我們,我們將及時溝通與處理。本站內容系統采集于網絡,涉及言論、版權與本站無關。
  • 相關文章
  • 收縮
    • 微信客服
    • 微信二維碼
    • 電話咨詢

    • 400-1100-266
    上犹县| 海伦市| 措勤县| 尉氏县| 鹤壁市| 视频| 莫力| 渝北区| 大连市| 屯昌县| 西青区| 荔波县| 花莲市| 漳州市| 和田市| 大城县| 涞水县| 铜鼓县| 炎陵县| 宜城市| 彩票| 嫩江县| 韶山市| 密山市| 德惠市| 科尔| 郴州市| 溧阳市| 竹溪县| 明水县| 泾阳县| 上虞市| 府谷县| 田东县| 北辰区| 长寿区| 安宁市| 贵阳市| 西昌市| 曲水县| 德令哈市|