No.16 CSS--背景属性

 

一、CSS常见的背景属性

  •             background-color: aqua;          设置背景颜色
  •             background-image: none;         设置背景图片
  •             background-position: 0%;         设置背景图片位置
  •             background-repeat: no-repeat; 设置背景图片如何重复填充
  •             background-size: 0%;                设置背景图片大小

 1.1 background-color

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .box1{
            width: 800px;
            height: 600px;
            background-color: rgb(196, 255, 201);
        }
    </style>
</head>

<body>

    <div class="box1"></div>

</body>

　　

 1.2background-image

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 800px;
            height: 600px;
            background-color: rgb(196, 255, 201);
        }
        .box2{
            width: 800px;
            height: 600px;
            background-image: url("大熊猫.jpg");
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

1.3 background-repeat

1.4 background-size

  • 设置背景图像的大小。

 1.5 background-position

  • 设置背景图像的起始位置。

  •  

 

posted @ 2025-02-26 17:16  百里屠苏top  阅读(16)  评论(0)    收藏  举报