为何使用all: unset后CSS background-image无法正常显示？

问题根源 #

你遇到的核心问题是all: unset重置了<hr>的display属性：

• <hr>元素的默认浏览器样式是display: block，但all: unset会把它重置为初始值inline（HTML非替换元素的初始display类型为inline）。
• 当<hr>变为inline后，你设置的height属性无法正常生效（inline元素高度由line-height控制），导致背景图没有足够的渲染空间，最终表现为background-image失效。
• Storybook与生产环境的差异，大概率是因为两者的基础样式重置规则不同，Storybook可能隐式保留了<hr>的block显示模式。

修复方案 #

方案一：显式设置display: block #

在all: unset之后强制添加display: block，确保<hr>回到块级元素状态：

<hr
  style={{
    ...(toggle ? { all: 'unset' } : {}),
    display: 'block', // 关键修复：强制设置为块级元素
    border: 'none',
    backgroundRepeat: `no-repeat`,
    backgroundSize: `100% 0.05em`,
    backgroundPosition: `center`,
    backgroundImage: `linear-gradient( 90deg, rgba(0,0,0,0) 0%, hsl(0, 200%, 90%) 10%, hsl(0, 200%, 90%) 48%, rgba(0,0,0,0) 48%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 52%, hsl(0, 200%, 90%) 52%, hsl(0, 200%, 90%) 90%, rgba(0,0,0,0) 100%)`,
    color: `hsl(0, 0%, 20%)`,
    textAlign: `center`,
    height: `0.75em`,
  }}
/>

方案二：精准重置属性，避免all: unset #

如果不需要重置所有属性，只针对实际需要调整的样式（比如font-size、margin）单独设置，避免影响display这类关键布局属性，从根源上规避问题。

验证逻辑 #

你可以通过浏览器开发者工具直观确认：

• 未添加all: unset时，<hr>的display为block；
• 添加all: unset后，display会变为inline，此时height属性不生效，背景图自然无法显示。

内容的提问来源于stack exchange，提问作者Nate-Wilkins