前端day10-背景

最新推荐文章于 2024-10-12 10:41:56 发布

小王在学习了

最新推荐文章于 2024-10-12 10:41:56 发布

阅读量163

点赞数 2

分类专栏：前端文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/wlx2513/article/details/140985912

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景</title>

    <style>
        /* 背景色bgc */
        .b0 {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        /* 背景图bgi */
        /* 当范围大于图片，图片会重复出现 */
        .b1 {
            width: 600px;
            height: 600px;
            background-image: url(image/i1.png);
        }

        /* 背景平铺bgr */
        .b2 {
            width: 600px;
            height: 600px;
            background-color: palevioletred;
            background-image: url(image/i1.png);
            /* 不平铺 */
            background-repeat: no-repeat;
            /* 沿着水平和垂直方向都平铺，默认 */
            /* background-repeat: repeat; */
            /* 沿着水平方向平铺 */
            /* background-repeat: repeat-x; */
            /* 沿着垂直方向平铺 */
            /* background-repeat: repeat-y; */
        }

        /* 背景位置bgp */
        /* background-position:水平位置 垂直位置 */
        /* 水平: left right center 数字像素 */
        /* 垂直: top center bottom 数字像素 */
        /* 正数向右或下，负数向左或上 */
        .b3 {
            width: 600px;
            height: 600px;
            background-color: palevioletred;
            background-image: url(image/i1.png);
            background-repeat: no-repeat;
            /* background-position: center center; */
            background-position: center;
        }

        /* 背景复合属性的连写，且位置没有固定 */
        /* color image repeat position(英文可颠倒，数字不行) */
        .b4 {
            width: 600px;
            height: 600px;
            background: pink url(image/i1.png) no-repeat right bottom; 
        }
    </style>
</head>
<body>
    <!-- 背景色 -->
    <div class="b0"></div>

    <hr>

    <!-- 背景图片 -->
    <div class="b1"></div>

    <hr>

    <!-- 背景平铺 -->
    <div class="b2"></div>

    <hr>

    <!-- 背景位置 -->
    <div class="b3"></div>

    <hr>

    <!-- 背景复合属性 -->
    <div class="b4"></div>


</body>
</html>