CSS的背景属性

背景属性包括：color 颜色属性、image图片、position显示位置，repeat填充，size属性

基本格式为background-+属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .xxx{
            width: 300px;
            height: 500px;
            background-color: blue;
        }
        .xxxx{
            width: 400px;
            height: 400px;
            background-image: url("3.webp");
            background-repeat: repeat-x;
           background-position:center center;
        }
    </style>
</head>
<body>
    <div class="xxx">
                111
    </div>              <!--设置背景颜色-->
    <div class="xxxx">222</div>         <!--设置背景图片-->
</body>
</html>
 background-color:设置背景颜色
 background-image:设置背景图片，图片路径用在url("")里面
 background-repeat：设置背景的平铺，repeat为默认平铺，repeat-x为水平平铺，repeat-y为垂直平铺，no-repeat为不平铺
默认为不让空白，当空白时会自动填充
background-size:length表示宽和高，percentage为所占页面的百分比，第一个为宽第二个为高，只设置第一个时，第二个为auto，cover为完全覆盖，背景最小大小，图片会进行裁剪，但会充满整个容器，contain 背景图片定义区域，最大大小，不充满整个容器，图片不会变形
 background-position：规定图片位置相当于将图片相应部位裁剪下来做背景，一般后面跟两个单词。
posted @ 2023-09-21 16:50  songs7  阅读(38)  评论(0)    收藏  举报