css - 本地启动网站时未呈现 CSS 背景内联 SVG 图像

Question

在这个项目中，我试图用内联 SVG 图标替换Font Awesome 。
以下 CSS 描述了一个菜单切换按钮，如此屏幕截图所示：

#btnToggleHeader {
    float: right;
    position: relative;
    top: -0.1em;
    outline: none;
    margin: 0 0 0 0.5em;
    cursor: pointer;

    /* The styling matches that of the select2 dropdown box */
    background: none;
    border: 2px solid #aaa;
    border-radius: 4px;
    padding: 0.2em 0.5em;
}

#btnToggleHeader:hover {
    background-color: #f4f4f4;
}

#btnToggleHeader::before {
    display: inline-block;
    content: '';
    width: 1em;
    height: 1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' aria-hidden='true' focusable='false' width='1em' height='1em' style='-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);' preserveAspectRatio='xMidYMid meet' viewBox='0 0 15 15'%3E%3Cg fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.5 3a.5.5 0 0 0 0 1h12a.5.5 0 0 0 0-1h-12zM1 7.5a.5.5 0 0 1 .5-.5h12a.5.5 0 0 1 0 1h-12a.5.5 0 0 1-.5-.5zm0 4a.5.5 0 0 1 .5-.5h12a.5.5 0 0 1 0 1h-12a.5.5 0 0 1-.5-.5z' fill='%23626262'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-position-y: 1px;
}

当我让 Netlify 通过 rollup.js 部署网站快照时，该按钮显示正确。

当我通过运行在本地启动网站时

$ npm run build
$ python3 -m http.server

然后菜单切换按钮无法正确显示，如下面的屏幕截图所示：

为什么图标的行为不同？

标签： cssfont-awesomerollupjsinline-svg