Question

我正在开发一个VS2010 ASP.NET Web应用程序项目，我已经添加了一个html页面。问题是当启动调试（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

我想也许有一些网络配置限制了对资源的访问。剂量任何人都知道如何处理它？

THX！

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 over png，现在我改为使用png而不是svg。

所以svg和png之间唯一不同的谎言，我将学习有关svg的详细信息。我仍然猜测它与浏览器解释svg的方式有关，它在调试模式网站中给出。

html页面无法显示css background-image

1 个答案: