HTML内联style与外部CSS样式冲突问题咨询

我明白你的困扰——你想把背景图路径放在内联style标签里，剩下的背景相关样式交给外部CSS统一控制，但目前外部的background-position、background-repeat这些规则完全没生效，只有把所有样式堆在同一个文件里才有用。这其实是CSS简写属性的优先级特性导致的问题，咱们一步步解决：

为什么外部样式不生效？ #

你在内联样式里用的是background: url('xxx')，这是background属性的简写形式。简写属性的特性是：只要你调用它，就会把所有相关的子属性（比如position、repeat、size）都重置为浏览器默认值，再加上内联样式的优先级本来就比外部CSS高，所以外部CSS里设置的那些子属性直接被覆盖了，自然看不到效果。

完美解决方案：用单独的background-image属性 #

把内联样式里的background改成background-image，这样就只会设置背景图的路径，不会干扰其他background子属性，外部CSS里的规则就能正常生效了。

修改后的HTML示例：

<section id="top-games">
  <div class="container">
    <div class="games">
      <div class="game" style="background-image: url('https://static-cdn.jtvnw.net/ttv-boxart/Fortnite.jpg');">
        <!-- 元素内容 -->
      </div>
      <div class="game" style="background-image: url('https://static-cdn.jtvnw.net/ttv-boxart/Fortnite.jpg');">
        <!-- 元素内容 -->
      </div>
    </div>
  </div>
</section>

你的外部CSS可以完全保持原样：

#top-games .games {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 10px;
  padding-bottom: 20px;
}

#top-games .games .game {
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 280px;
  border-radius: 5px;
  position: relative;
  -webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.45);
  -moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.45);
  box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.45);
  overflow: hidden;
  cursor: pointer;
}

这样修改后，每个.game元素的背景图由内联样式指定，而背景定位、重复方式、缩放规则等都由外部CSS统一控制，完全符合你的需求。

不推荐的备选方案：用!important #

如果你因为某些限制一定要用简写的background，可以在外部CSS的子属性后面加!important强制提升优先级，比如：

#top-games .games .game {
  background-position: top center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  /* 其他样式 */
}

但这种方式会破坏CSS的优先级规则，后期维护起来很麻烦，所以强烈建议优先用第一种方案。

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