使用Pico.css时，如何去除Leaflet自定义缩放按钮的背景

AI 小北

2026-6-26

问题：Leaflet缩放按钮背景无法去除

已参考Leaflet标记自定义相关内容，目前通过CSS为Leaflet的放大、缩小按钮设置了透明背景的SVG图标，但无法去除按钮本身的背景。

相关代码

HTML文件

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">

    <link rel="stylesheet" href="style.css">

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
    crossorigin=""/>

    <title>TITLE</title>
</head>
<body>             
        <div id="map"></div>
            <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
            integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
            crossorigin=""></script>

            <script src="mapscript.js"></script>
</body>
</html>

CSS文件

#map { height: 500px; }

[role=button],button,input[type=button],input[type=reset],input[type=submit]{
    --background-color:none;
    --border-color:none;
}

[role=button]:is([aria-current],:hover,:active,:focus),button:is([aria-current],:hover,:active,:focus),input[type=button]:is([aria-current],:hover,:active,:focus),input[type=reset]:is([aria-current],:hover,:active,:focus),input[type=submit]:is([aria-current],:hover,:active,:focus){
    --background-color:none;
    --border-color:none;
}

.leaflet-control-zoom-in, .leaflet-control-zoom-out {
    background-image: none;
    text-indent: -9999px;
    background-repeat: no-repeat;
    background-size: cover;
    border: none;
}

.leaflet-control-zoom-in {
    background-image: url('./immagini/plus-circle-svgrepo-com.svg');
}

.leaflet-control-zoom-out {
    background-image: url('./immagini/minus-circle-svgrepo-com.svg');
}