CSS中background-repeat后使用background简写报错如何解决？

1. background属性报错问题 #

成因 #

background是CSS的背景简写属性，可一次性设置background-color、background-image、background-repeat、background-position等所有背景相关的子属性。你当前的代码先单独编写了background-color、background-repeat，后续又使用background简写声明，前面定义的两个单属性会被background的默认值覆盖，既造成代码冗余，也容易出现不符合预期的样式效果，因此样式校验工具会抛出该错误。

修复方案 #

有两种可行修复方式，按需选择即可：

• 方案1：将所有背景相关属性合并到background简写中，删除冗余的单属性声明

.customize_modal.session_timeout .modal-body h1 span{
    border: 1px solid #dadada;
    border-radius: 10px;
    padding: 0 15px;
    /* 合并所有背景设置到简写，渐变作为背景图，颜色、重复规则都写在简写里 */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f0f0f0), to(#dedede)) #dedede repeat-x;
}

• 方案2：将渐变设置改为单独的background-image属性，避免覆盖其他背景单属性

.customize_modal.session_timeout .modal-body h1 span{
    border: 1px solid #dadada;
    border-radius: 10px;
    padding: 0 15px;
    background-color: #dedede;
    background-repeat: repeat-x;
    /* 改用单属性设置背景图，不会覆盖color和repeat的配置 */
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f0f0f0), to(#dedede));
}

2. font简写相关报错问题 #

成因 #

和background报错的逻辑完全一致：font是字体相关的简写属性，会一次性覆盖font-weight、font-size、font-family、line-height、font-style等所有字体子属性。先写font-weight再写font简写，前面的font-weight设置会被font的默认值覆盖，因此校验工具会抛出错误。

修复方案 #

同样有两种修复方式：

• 方案1：将font-weight的配置合并到font简写声明中，删除单独的font-weight属性
• 方案2：把font简写拆分为对应的单个字体属性（比如font-family、font-size等）分别声明，避免覆盖提前写好的font-weight配置

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