Edit in JSFiddle

<div class="map-container">
    <div id="map"></div>
    <div class="map-blend"></div>
</div>

body {
    background-color: rgb(249, 249, 249);
}
.map-container {
    height: 500px;
    width: 500px;
    margin: 30px auto;
    position: relative;
}
#map {
    height: 100%;
    width: 100%;
}
.map-blend {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(https://lh3.googleusercontent.com/-6reS1rd7Gks/Uop1Ev_mhBI/AAAAAAAAECs/PKVaBVFT5Bw/s800/map-blend.png);
    background-size: 100% 100%;
    pointer-events: none;
}

var map = L.map("map", {
            minZoom: 9,
            maxZoom: 18,
            zoomControl: false,
            attributionControl: false
        }).setView([35.260, -80.827],10);


L.tileLayer("http://maps.co.mecklenburg.nc.us/tiles/meckbase/{y}/{x}/{z}.png").addTo(map);