溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
CSS3中如何使用background-size定義背景圖片大小？針對這個問題，今天小編總結這篇有關background-size屬性的文章，可供感興趣的小伙伴們參考借鑒，希望對大家有所幫助。
1、實現以下效果，使用純DIV+CSS，必須使用background-size
附加說明：
1、背景圖片大小本身是500*300大小
2、div容器寬度600*300大小
3、要求整體居中顯示
1、準備素材：根目錄創建images文件夾，把相關素材圖片都存放與此，素材有
2、創建好index.html，寫好架構，架構如何分析呢
思路分析：
1、目標由5個div組成，每個div的背景圖片都是一樣的，只不過背景圖片的呈現方式不同
2、每個div都帶有一個標題
根據分析，我們得出以下代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景圖片大小background-size演示</title>
</head>
<body>
<div class="container">
<h5>原樣顯示背景圖片</h5>
<div class="demo bg1"></div>
<h5>300寬和100高顯示背景圖片</h5>
<div class="demo bg2"></div>
<h5>80%寬和60%高顯示背景圖片</h5>
<div class="demo bg3"></div>
<h5>背景圖片填充整個容器</h5>
<div class="demo bg4"></div>
<h5>背景圖片擴充到容器的一邊即可</h5>
<div class="demo bg5"></div>
</div>
</body>
</html>3、寫樣式 ，創建css文件夾，里面新建index.css，里面的樣式怎么寫了，以下是分析思路
思路分析：
1、.container *
思路分析
1、為了設置容器里的所有元素的公共樣式，我們可以將這些公共代碼寫入.container * 樣式內
所以index.css中添加代碼如下：
.container *{
padding:0;
margin:0;
}2、.demo
思路分析：
1、根據要求得知寬600，高300，所以轉成代碼即width:600px;height:300px;背景圖片是愛莎，且不重復所以background: url(../images/as.jpg) no-repeat;帶邊框所以
border: 1px solid #999;要居中所以margin: 0 auto 10px auto;
所以index.css中添加代碼如下：
.demo {
background: url(../images/as.jpg) no-repeat;
width: 600px;
height: 300px;
border: 1px solid #999;
margin: 0 auto 10px auto;
}3、標題h5
思路分析：
1、要求文本居中，所以轉成代碼即 text-align: center;、
所以index.css中添加代碼如下：
h5{
text-align: center;
}4、5種不同的顯示方式
思路分析：
1、第一種方式就是默認的方式，就是背景圖片多大，就顯示多大
2、第二種方式就是自定義固定寬高的方式顯示，要求背景圖片按照寬300，高100顯示
3、第三種方式就是按照自定義百分比的方式顯示，要求按照背景圖片容器div的寬*80%,高*60%顯示（即背景圖片最終寬=600*80%=480,高=300*60%=180）
4、第四種方式就是讓背景圖片填充整個div，這里要注意的是，如果背景圖片寬<容器的寬，那么背景圖片就會等比例增長，直到填滿了容器，如果高度增長到大于容器的高度，那么超出容器的部分就會被隱藏，只顯示容器大小的部分
5、第五種方式就是將背景圖片等比縮放至某一條邊填滿了容器的一條邊為止
這里要要注意一點，除了第2種，第三種，不是等比例擴展圖片，其他的幾個都是等比例擴展背景圖直到符合條件即停止擴展
所以index.css中添加代碼如下：
.bg1 {
background-size: auto;
}
.bg2 {
background-size: 300px 100px;
}
.bg3 {
background-size: 80% 60%;
}
.bg4 {
background-size: cover;
}
.bg5 {
background-size: contain;
}到此為止，index.css的全部內容如下：
.container *{
padding:0;
margin: 0;
}
.demo {
background: url(../images/as.jpg) no-repeat;
width: 600px;
height: 300px;
border: 1px solid #999;
margin: 0 auto 10px auto;
}
h5{
text-align: center;
}
.bg1 {
background-size: auto;
}
.bg2 {
background-size: 300px 100px;
}
.bg3 {
background-size: 80% 60%;
}
.bg4 {
background-size: cover;
}
.bg5 {
background-size: contain;
}然后將index.css引入index.html中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景圖片大小background-size演示</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div class="container">
<h5>原樣顯示背景圖片</h5>
<div class="demo bg1"></div>
<h5>300寬和100高顯示背景圖片</h5>
<div class="demo bg2"></div>
<h5>80%寬和60%高顯示背景圖片</h5>
<div class="demo bg3"></div>
<h5>背景圖片填充整個容器</h5>
<div class="demo bg4"></div>
<h5>背景圖片擴充到容器的一邊即可</h5>
<div class="demo bg5"></div>
</div>
</body>
</html>運行效果如下：
到此為止，我們就實現了全部的需求
1、background-size主要用來設置背景圖片的大小，語法格式如下：
background-size:auto|固定寬和高|百分比寬和高|cover|contain
上文描述的就是background-size屬性的用法，具體使用情況還需要大家自己動手實驗使用過才能領會。如果想了解更多相關內容，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
