欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

CSS3中如何使用background-size定義背景圖片大小-創(chuàng)新互聯(lián)

CSS3中如何使用background-size定義背景圖片大小？針對(duì)這個(gè)問(wèn)題，今天小編總結(jié)這篇有關(guān)background-size屬性的文章，可供感興趣的小伙伴們參考借鑒，希望對(duì)大家有所幫助。

寶清網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、響應(yīng)式網(wǎng)站設(shè)計(jì)等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。成都創(chuàng)新互聯(lián)公司成立與2013年到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)公司。

1、實(shí)現(xiàn)以下效果，使用純DIV+CSS，必須使用background-size

CSS3中如何使用background-size定義背景圖片大小

附加說(shuō)明：

1、背景圖片大小本身是500*300大小

2、div容器寬度600*300大小

3、要求整體居中顯示

現(xiàn)在來(lái)具體操作

1、準(zhǔn)備素材：根目錄創(chuàng)建images文件夾，把相關(guān)素材圖片都存放與此，素材有

CSS3中如何使用background-size定義背景圖片大小

2、創(chuàng)建好index.html，寫(xiě)好架構(gòu)，架構(gòu)如何分析呢

思路分析：

1、目標(biāo)由5個(gè)div組成，每個(gè)div的背景圖片都是一樣的，只不過(guò)背景圖片的呈現(xiàn)方式不同

2、每個(gè)div都帶有一個(gè)標(biāo)題

根據(jù)分析，我們得出以下代碼

<!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>背景圖片填充整個(gè)容器</h5>
        <div class="demo bg4"></div>
        <h5>背景圖片擴(kuò)充到容器的一邊即可</h5>
        <div class="demo bg5"></div>
    </div>
</body>
</html>

3、寫(xiě)樣式 ，創(chuàng)建css文件夾，里面新建index.css，里面的樣式怎么寫(xiě)了，以下是分析思路

思路分析：

1、.container *

思路分析

1、為了設(shè)置容器里的所有元素的公共樣式，我們可以將這些公共代碼寫(xiě)入.container * 樣式內(nèi)

所以index.css中添加代碼如下：

.container *{
    padding:0;
    margin:0;
}

2、.demo

思路分析：

1、根據(jù)要求得知寬600，高300，所以轉(zhuǎn)成代碼即width:600px;height:300px;背景圖片是愛(ài)莎，且不重復(fù)所以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、標(biāo)題h5

思路分析：

1、要求文本居中，所以轉(zhuǎn)成代碼即 text-align: center;、

所以index.css中添加代碼如下：

h5{
    text-align: center;
}

4、5種不同的顯示方式

思路分析：

1、第一種方式就是默認(rèn)的方式，就是背景圖片多大，就顯示多大

2、第二種方式就是自定義固定寬高的方式顯示，要求背景圖片按照寬300，高100顯示

3、第三種方式就是按照自定義百分比的方式顯示，要求按照背景圖片容器div的寬*80%,高*60%顯示（即背景圖片最終寬=600*80%=480,高=300*60%=180）

4、第四種方式就是讓背景圖片填充整個(gè)div，這里要注意的是，如果背景圖片寬<容器的寬，那么背景圖片就會(huì)等比例增長(zhǎng)，直到填滿了容器，如果高度增長(zhǎng)到大于容器的高度，那么超出容器的部分就會(huì)被隱藏，只顯示容器大小的部分

5、第五種方式就是將背景圖片等比縮放至某一條邊填滿了容器的一條邊為止

這里要要注意一點(diǎn)，除了第2種，第三種，不是等比例擴(kuò)展圖片，其他的幾個(gè)都是等比例擴(kuò)展背景圖直到符合條件即停止擴(kuò)展

所以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的全部?jī)?nèi)容如下：

.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>背景圖片填充整個(gè)容器</h5>
        <div class="demo bg4"></div>
        <h5>背景圖片擴(kuò)充到容器的一邊即可</h5>
        <div class="demo bg5"></div>
    </div>
</body>
</html>

運(yùn)行效果如下：

CSS3中如何使用background-size定義背景圖片大小

到此為止，我們就實(shí)現(xiàn)了全部的需求

總結(jié)：

1、background-size主要用來(lái)設(shè)置背景圖片的大小，語(yǔ)法格式如下：

background-size:auto|固定寬和高|百分比寬和高|cover|contain

上文描述的就是background-size屬性的用法，具體使用情況還需要大家自己動(dòng)手實(shí)驗(yàn)使用過(guò)才能領(lǐng)會(huì)。如果想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享文章：CSS3中如何使用background-size定義背景圖片大小-創(chuàng)新互聯(lián)
分享URL：http://chinadenli.net/article38/desppp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、品牌網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、網(wǎng)站內(nèi)鏈、建站公司、域名注冊(cè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站制作