将CSS3过滤器应用于Leaflet上的图像图块

Question

我只想在传单的图像图块上应用filter:hue-rotate()，而不是#myMapDiv的任何子元素。

这似乎影响了我的标记（与我想要的相反）。

#map {
    filter: hue-rotate(180deg);
}

这是地图的HTML

<div id="map" class="leaflet-container leaflet-touch leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom" style="position: relative; outline: currentcolor none medium;" tabindex="0"><div class="leaflet-pane leaflet-map-pane" style="transform: translate3d(-83px, -23px, 0px);"><div class="leaflet-pane leaflet-tile-pane"><div class="leaflet-layer " style="z-index: 1; opacity: 1;"><div class="leaflet-tile-container leaflet-zoom-animated" style="z-index: 19; transform: translate3d(564px, 299px, 0px) scale(0.5);"></div><div class="leaflet-tile-container leaflet-zoom-animated" style="z-index: 20; transform: translate3d(376px, 200px, 0px) scale(1);"><img alt="" role="presentation" src="https://stamen-tiles-c.a.ssl.fastly.net/toner-background/11/647/1123.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(167px, -209px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://stamen-tiles-d.a.ssl.fastly.net/toner-background/11/647/1124.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(167px, 47px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://stamen-tiles-b.a.ssl.fastly.net/toner-background/11/646/1123.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(-89px, -209px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://stamen-tiles-d.a.ssl.fastly.net/toner-background/11/648/1123.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(423px, -209px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://stamen-tiles-c.a.ssl.fastly.net/toner-background/11/646/1124.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(-89px, 47px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://stamen-tiles-a.a.ssl.fastly.net/toner-background/11/648/1124.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(423px, 47px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://stamen-tiles-a.a.ssl.fastly.net/toner-background/11/647/1125.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(167px, 303px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://stamen-tiles-b.a.ssl.fastly.net/toner-background/11/648/1125.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(423px, 303px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://stamen-tiles-b.a.ssl.fastly.net/toner-background/11/649/1124.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(679px, 47px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://stamen-tiles-a.a.ssl.fastly.net/toner-background/11/649/1123.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(679px, -209px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://stamen-tiles-d.a.ssl.fastly.net/toner-background/11/646/1125.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(-89px, 303px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://stamen-tiles-c.a.ssl.fastly.net/toner-background/11/649/1125.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(679px, 303px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://stamen-tiles-b.a.ssl.fastly.net/toner-background/11/645/1124.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(-345px, 47px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://stamen-tiles-c.a.ssl.fastly.net/toner-background/11/650/1124.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(935px, 47px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://stamen-tiles-a.a.ssl.fastly.net/toner-background/11/645/1123.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(-345px, -209px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://stamen-tiles-b.a.ssl.fastly.net/toner-background/11/650/1123.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(935px, -209px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://stamen-tiles-c.a.ssl.fastly.net/toner-background/11/645/1125.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(-345px, 303px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://stamen-tiles-d.a.ssl.fastly.net/toner-background/11/650/1125.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(935px, 303px, 0px); opacity: 1;"></div></div></div><div class="leaflet-pane leaflet-shadow-pane"></div><div class="leaflet-pane leaflet-overlay-pane"><svg pointer-events="none" class="leaflet-zoom-animated" width="1552" height="690" style="transform: translate3d(-46px, -34px, 0px);" viewBox="-46 -34 1552 690"><g><path class="leaflet-interactive" stroke="#f8ca00" stroke-opacity="1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#881600" fill-opacity="0.2" fill-rule="evenodd" d="M582,351a20,20 0 1,0 40,0 a20,20 0 1,0 -40,0 "></path><path class="leaflet-interactive" stroke="#f8ca00" stroke-opacity="1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#881600" fill-opacity="0.2" fill-rule="evenodd" d="M590,393a20,20 0 1,0 40,0 a20,20 0 1,0 -40,0 "></path><path class="leaflet-interactive" stroke="#1ec0ff" stroke-opacity="1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#f8ca00" fill-opacity="0.2" fill-rule="evenodd" d="M576,392a20,20 0 1,0 40,0 a20,20 0 1,0 -40,0 "></path><path class="leaflet-interactive" stroke="#1ec0ff" stroke-opacity="1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#e53a40" fill-opacity="0.2" fill-rule="evenodd" d="M654,369a20,20 0 1,0 40,0 a20,20 0 1,0 -40,0 "></path><path class="leaflet-interactive" stroke="#1ec0ff" stroke-opacity="1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#881600" fill-opacity="0.2" fill-rule="evenodd" d="M679,410a20,20 0 1,0 40,0 a20,20 0 1,0 -40,0 "></path><path class="leaflet-interactive" stroke="#7200da" stroke-opacity="1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#881600" fill-opacity="0.2" fill-rule="evenodd" d="M631,344a20,20 0 1,0 40,0 a20,20 0 1,0 -40,0 "></path><path class="leaflet-interactive" stroke="#f8ca00" stroke-opacity="1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#b2ffff" fill-opacity="0.2" fill-rule="evenodd" d="M626,426a20,20 0 1,0 40,0 a20,20 0 1,0 -40,0 "></path><path class="leaflet-interactive" stroke="#f8ca00" stroke-opacity="1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#b2ffff" fill-opacity="0.2" fill-rule="evenodd" d="M551,439a20,20 0 1,0 40,0 a20,20 0 1,0 -40,0 "></path><path class="leaflet-interactive" stroke="undefined" stroke-opacity="1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="undefined" fill-opacity="0.2" fill-rule="evenodd" d="M0 0"></path><path class="leaflet-interactive" stroke="#f8ca00" stroke-opacity="1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#f8ca00" fill-opacity="0.2" fill-rule="evenodd" d="M615,351a20,20 0 1,0 40,0 a20,20 0 1,0 -40,0 "></path><path class="leaflet-interactive" stroke="#f8ca00" stroke-opacity="1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#f8ca00" fill-opacity="0.2" fill-rule="evenodd" d="M615,351a20,20 0 1,0 40,0 a20,20 0 1,0 -40,0 "></path><path class="leaflet-interactive" stroke="#f8ca00" stroke-opacity="1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#f8ca00" fill-opacity="0.2" fill-rule="evenodd" d="M773,430a20,20 0 1,0 40,0 a20,20 0 1,0 -40,0 "></path><path class="leaflet-interactive" stroke="#f8ca00" stroke-opacity="1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#f8ca00" fill-opacity="0.2" fill-rule="evenodd" d="M726,375a20,20 0 1,0 40,0 a20,20 0 1,0 -40,0 "></path></g></svg></div><div class="leaflet-pane leaflet-marker-pane"></div><div class="leaflet-pane leaflet-tooltip-pane"></div><div class="leaflet-pane leaflet-popup-pane"></div><div class="leaflet-proxy leaflet-zoom-animated" style="transform: translate3d(165819px, 287808px, 0px) scale(1024);"></div></div><div class="leaflet-control-container"><div class="leaflet-top leaflet-left"></div><div class="leaflet-top leaflet-right"></div><div class="leaflet-bottom leaflet-left"></div><div class="leaflet-bottom leaflet-right"><div class="leaflet-control-attribution leaflet-control"><a href="http://leafletjs.com" title="A JS library for interactive maps" target="_blank">Leaflet</a> | Map tiles by <a href="http://stamen.com" target="_blank">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0" target="_blank">CC BY 3.0</a> — Map data © <a href="http://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a></div></div></div></div>

Answer 1

我对传单不熟悉，但是从您发布的内容来看，图像看起来像放在.leaflet-layer中。意思是

.leaflet-layer {
  filter: hue-rotate(180deg);
}

...会的。

演示：

window.onload = function(){
  var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
  osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  osm = L.tileLayer(osmUrl, {
    maxZoom: 18,
    attribution: osmAttrib
  });

var map = L.map('map').setView([53.350140, -6.266155], 11).addLayer(osm);

// Script for adding marker on map click
function onMapClick(e) {

  var marker = L.marker(e.latlng, {
      draggable: true,
      title: "Resource location",
      alt: "Resource Location",
      riseOnHover: true
    }).addTo(map)
    .bindPopup(e.latlng.toString()).openPopup();

  // Update marker on changing it's position
  marker.on("dragend", function(ev) {

    var chagedPos = ev.target.getLatLng();
    this.bindPopup(chagedPos.toString()).openPopup();

  });
}

map.on('click', onMapClick);
}

#map {
  height: 100vh;
  width: 100%;
}

body {
  margin: 0;
}

.leaflet-layer {
  filter: hue-rotate(180deg);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.js"></script>

<div id="map"></div>

标记不受影响（单击以添加一个）。