CSS中的background(背景)概念讲解

Hyinglin
103 阅读3分钟

Image.png

背景图片

 div {

    width: 300px;

    height: 300px;

    /* 不要落下 url()   */

    background-image: url(images/logo.png);

 }
 
 <div></div>

背景平铺

div {

    width: 300px;

    height: 300px;

    background-color: pink;

    background-image: url(images/logo.png);

    /* 1.背景图片不平铺 */

    /* background-repeat: no-repeat; */

    /* 2.默认的情况下,背景图片是平铺的 */

    /* background-repeat: repeat; */

    /* 3. 沿着x轴平铺 */

    /* background-repeat: repeat-x; */

    /* 4. 沿着Y轴平铺 */

    background-repeat: repeat-y;

    /* 页面元素既可以添加背景颜色也可以添加背景图片 只不过背景图片会压住背景颜色 */

}
<div></div>

背景方位

div {

    width: 300px;

    height: 300px;

    background-color: pink;

    background-image: url(images/logo.png);

    background-repeat: no-repeat;

    /* background-position:  方位名词; */

    /* background-position: center top; */

    /* background-position: right center; */

    /* 如果是方位名词  right center 和 center right 效果是等价的 跟顺序没有关系 */

    /* background-position: center right; */

    /* 此时 水平一定是靠右侧对齐  第二个参数省略 y 轴是 垂直居中显示的 */

    /* background-position: right; */

    /* 此时 第一个参数一定是 top y轴 顶部对齐   第二个参数省略x  轴是 水平居中显示的 */

    background-position: top;

}

背景方位应用一（修饰性图片）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>背景位置方位名词应用一</title>

    <style>

        h3 {

            width: 118px;

            height: 40px;

            /* background-color: pink; */

            font-size: 14px;

            font-weight: 400;

            line-height: 40px;

            background-image: url(images/icon.png);

            background-repeat: no-repeat;

            background-position: left center;

            text-indent: 1.5em;

        }

    </style>

</head>

<body>

    <h3>

        成长守护平台

    </h3>

</body>

</html>

背景方位应用二（超大图片）

<!DOCTYPE html>

<html lang="en">
<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>超大背景图片</title>

    <style>

        body {

            background-image: url(images/bg.jpg);

            background-repeat: no-repeat;

            /* background-position: center top; */

            background-position: center 40px;

        }

    </style>

</head>

<body>

</body>


</html>

精确单位


div {

        width: 300px;

        height: 300px;

        background-color: pink;

        background-image: url(images/logo.png);

        background-repeat: no-repeat;

        /* 20px 50px; x轴一定是 20  y轴一定是 50 */

        /* background-position: 20px 50px; */

        /* background-position: 50px 20px; */

        background-position: 20px;
    }

 <div></div>

混合单位

div {

    width: 300px;

    height: 300px;

    background-color: pink;

    background-image: url(images/logo.png);

    background-repeat: no-repeat;

    /* 20px center  一定是x 为 20  y 是 center  等价于   background-position: 20px */

    /* background-position: 20px center; */

    /* 水平是居中对齐  垂直是 20 */

    background-position: center 20px;
}
<div></div>

背景固定

<!DOCTYPE html>

<html lang="en">
<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>超大背景图片</title>

    <style>

        body {

            background-image: url(images/bg.jpg);

            background-repeat: no-repeat;

            background-position: center top;

            /* 把背景图片固定住 */

            background-attachment: fixed;

            color: #fff;

            font-size: 20px;

        }

    </style>

</head>

<body>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

    <p>天王盖地虎, pink老师一米五</p>

</body>

</html>

背景属性复合写法：

background: black url(images/bg.jpg) no-repeat fixed center top;
avatar
文章
阅读
粉丝