css样式应用

在写前端页面是，写出来的格式非常不整齐，看着很别扭，这时就可以使用css样式来调整。
我是将代码交给ai，让它帮忙生成样式顺便学习
其中有应用到设置背景图片

.content-area {
        flex: 1;
        overflow: auto;
        margin-left: 0px; /* 确保内容区域在左侧菜单的右侧 */
        background-color: #f0f2f5; /* 添加背景色以便观察 */
    }

还有调整间距大小等

.home-container {
        width: 100%;
        height: 100vh; /* 设置高度为视口高度 */
        background-image: url('imgs/23.png'); /* 替换为你的背景图片路径 */
        background-size: 100% ; /* 背景图片覆盖整个容器 */
        background-position: center; /* 背景图片居中 */
        background-repeat: no-repeat; /* 背景图片不重复 */
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: #fff; /* 文字颜色 */
        text-align: center;
    }

    .home-content {
        background: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
        padding: 20px;
        border-radius: 10px; /* 圆角边框 */
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* 阴影效果 */
    }