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 @   songs7  阅读(23)  评论(0)  编辑  收藏  举报
相关博文：
·  CSS的字体属性
·  CSS的文本属性
·  大二快乐日记12.1
·  No.16 CSS--背景属性
·  寒假打卡……
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 25岁的心里话
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
SQL AI 助手