如何修改CSS使网站背景效果与Adobe XD设计稿完全一致

你现有CSS仅配置了单张背景图，缺少气泡素材叠加、右侧深色半透明区域的配置，需按如下修改：

1. 首先修正选择器（你当前代码的Sbody-part-main疑似输入错误，若为类选择器需补全.前缀，若为id选择器补全#前缀，以下示例以类选择器.body-part-main为例）
2. 改用CSS多背景语法，按层级叠加「右侧深色渐变层、气泡素材层、主素材层」，同时分别配置各背景的位置、尺寸、重复规则

修改后参考代码：

.body-part-main {
    /* 基础样式 */
    background-color: #674ADB; 
    padding: 50px;
    min-height: 600px; /* 按设计稿实际高度调整 */
    /* 多背景叠加，顺序越靠前层级越高 */
    background-image: 
        /* 第一层：右侧深色半透明区域，可按设计稿调整占比和透明度 */
        linear-gradient(to right, transparent 58%, rgba(13, 13, 17, 0.9) 58%),
        /* 第二层：气泡素材 */
        url("../../images/Checking/c2/bubble.png"),
        /* 第三层：主图素材 */
        url("../../images/Checking/c2/main.png");
    /* 分别对应三个背景的重复规则 */
    background-repeat: no-repeat, no-repeat, no-repeat;
    /* 分别对应三个背景的位置：渐变铺满、气泡靠右上偏移、主图靠左居中 */
    background-position: center center, top right -20px, left center;
    /* 分别对应三个背景的尺寸：渐变铺满、气泡按原始尺寸、主图自适应 */
    background-size: 100% 100%, auto, contain;
}

调整注意事项：

• 可根据设计稿实际效果调整linear-gradient的占比、透明度、色值，匹配右侧黑色区域的深浅和宽度
• 调整background-position中气泡的偏移值，确保气泡位置和设计稿完全对齐
• 如果主图尺寸有偏差，可修改background-size的contain为固定宽高值，和设计稿尺寸匹配

内容的提问来源于stack exchange，提问作者nashir haque