css實現背景圖片拉伸填充

首先我們知道用來當作背景圖片的有兩類：

（推薦學習：css快速入門）

# 1.一整張大圖，尺寸和區域大小剛好吻合；

2、一個很小的條狀圖，經過repeat後，形成一個很規則的大圖背景。

那麼要如何實現背景圖片拉伸填滿呢？

方法如下：

背景圖尺寸（數值表示方式）：

程式碼如下:

#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實現背景圖片拉伸填充的詳細內容。更多資訊請關注PHP中文網其他相關文章！