Day12背景屬性---拆封寫法與復(fù)合寫法

1.背景圖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景屬性</title>
    <style>
        div{
            width: 900px;
            height: 900px;
            /* 背景圖默認(rèn)是平鋪(復(fù)制)的效果 */
            background-image: url(../image/2.webp);
        }
    </style>
</head>
<body>
    <div>永遠(yuǎn)的紫荊花</div>
</body>
</html>

2.背景圖平鋪方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景圖平鋪方式</title>
    <style>
        div{
            width: 900px;
            height: 900px;
            background-color: pink;
            background-image: url(../image/2.webp);
            background-repeat: no-repeat;
            /* repeat是默認(rèn)的平鋪方式,不寫也是這個(gè)效果 */
            /* background-repeat: repeat; */
            /* background-repeat: repeat-x; */
            /* background-repeat: repeat-y; */
        }
    </style>
</head>
<body>
    <div>一直往南方開</div>
</body>
</html>

3.背景圖位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景圖位置</title>
    <style>
        div{
            width: 900px;
            height: 900px;
            background-image: url(../image/2.webp);
            background-color: pink;
            background-repeat: no-repeat;

            /* 圖片在左上角 */
            /* background-position: 0 0;  */
            /* 左下 */
            /* background-position: left bottom; */
            /* 右上 */
            /* background-position: right top; */

            /* 水平的方向:正數(shù)向右，負(fù)數(shù)向左 */
            /* 垂直的方向:正數(shù)像下，負(fù)數(shù)向上 */
            
            /* 關(guān)鍵字可以只寫一個(gè),另一個(gè)方向默認(rèn)居中 */
            /* background-position:  bottom; */

            /* 數(shù)字只寫一個(gè)表示水平方向，垂直方向居中 */
             background-position: 50px; 
        }
        </style>
</head>
<body>
    <div>我看過了世間的羅生門</div>
</body>
</html>

4.背景圖縮放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景圖縮放</title>
    <style>
        div{
            width: 900px;
            height: 900px;
            background-image: url(../image/2.webp);
            background-repeat: no-repeat;
            background-color: pink;
            /* 如果圖的寬高跟盒子的尺寸相同時(shí)會(huì)停止縮放，可能會(huì)導(dǎo)致盒子有留白 */
            /* background-size: contain; */
            /* cover會(huì)使圖片完全覆蓋盒子，但可能會(huì)導(dǎo)致圖片顯示不完全 */
            /* background-size: cover; */
            /* 當(dāng)圖的比例與盒子的比例一樣時(shí)，兩者的效果相同 */
            /* 100% 圖片的寬度與盒子的一樣，圖片的高度按照?qǐng)D片比例等比縮放 */
            background-size: 100%;
        }
    </style>
</head>
<body>
    <div>每當(dāng)我看到花瓣慢慢枯萎</div>
</body>
</html>

5.背景圖固定

6.復(fù)合寫法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>復(fù)合寫法</title>
    <style>
        div{
            width: 900px;
            height: 900px;
            background: pink url(../image/2.webp) no-repeat center bottom/cover;
        }
    </style>
</head>
<body>
    <div>起風(fēng)了</div>
</body>
</html>

posted @ 2025-11-05 17:36 冰涿閱讀(3) 評(píng)論(0) 收藏舉報(bào)

刷新頁面返回頂部

bingzhuo

Day12背景屬性---拆封寫法與復(fù)合寫法