html 页面无法显示 css 背景图像

Question

我正在开发一个 VS2010 ASP.NET Web 应用程序元素，我已经向其中添加了一个 html 页面。问题是当启动 debug(F5) 时，这个页面无法显示一些在 css 文件中设置的图标，但是当直接打开 html 页面时，那些背景图像可以完美显示。

CSS 代码是:

.leaflet-draw-toolbar a {
background-image: url('images/spritesheet.png');
background-image: linear-gradient(transparent,transparent),url('images/spritesheet.svg');
background-repeat: no-repeat;
background-size: 270px 30px;}

和相关的 javascripts 是:

var drawnItems = L.featureGroup().addTo(map);
    map.addControl(new L.Control.Draw({
        edit: {
            featureGroup: drawnItems,
            poly: {
                allowIntersection: false
            }
        },
        draw: {
            polygon: {
                allowIntersection: false,
                showArea: true
            }
        }
    }));

debug

open directly

我认为可能有一些网络配置限制了对资源的访问。任何人都知道如何处理它？

谢谢!

Answer 1

我更改了 CSS 代码并且它起作用了:

.leaflet-draw-toolbar a {
background-image: linear-gradient(transparent, transparent), url('images/spritesheet.svg');
background-image: url('images/spritesheet.png');
background-repeat: no-repeat;
background-size: 270px 30px;}

如您所见，在以前的代码中，background-image 使用 svg 而不是 png，现在我已经改为使用 png 而不是 svg。

所以唯一的区别在于 svg 和 png 之间，我将学习有关 svg 的详细信息。我仍然猜测这与浏览器解释 Debug模式网站中给出的 svg 的方式有关。