Q:

how to change opacity of zoom buttons on leaflet?

I am trying to change the opacity of the zoom control buttons that I have positioned at the top right of my leaflet map. I tried doing "mymap.zoomControl.setPosition('topright').setOpacity(0.5);" in the last line but it causes the whole map to disappear when I load the page. If you know the code to change the opacity of the zoom buttons on the map such that users are able to see through do let me know. 
var southWest = L.latLng(-89.98155760646617, -180), northEast = L.latLng(89.99346179538875, 180);
var bounds = L.latLngBounds(southWest, northEast);
var mymap = L.map('map', {
    center: [20.594, 78.962],
    maxBounds: bounds, // set max bounds for the world map
    zoom: 4, // default zoom level when the web is initiated
    zoomSnap: 0.25, // map's zoom level must be in multiple of this
    zoomDelta: 0.25, // controls how much the map's zoom level will change after a zoom
    minZoom: 3.25, // min zoom level the user can zoom out
    maxZoom: 6, // max zoom level the user can zoom in
    zoomControl: true, // allow zooming
});
mymap.zoomControl.setPosition('topright'); // set + and - zoom buttons to top right corner .setOpacity('0.4')
var MapAttribution = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>';
var DarkMatterUrl = 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'; // For dark theme map
var PositronUrl = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png'; // For light theme map
var tiles = L.tileLayer(DarkMatterUrl, { MapAttribution }).addTo(mymap); 
// Array of marker coordinates
var markers = [
{
    coords:[4.21, 101.97],
    country:'Malaysia',
    label:'Malaysia',
},
{
    coords:[20.594, 78.962],
    country:'India',
    label:'India',
},
{
    coords:[35.861, 104.195],
    country:'China',
    label:'China',
},
{
    coords:[23.421, 53.8478],
    country:'UAE',
    label:'UAE',
},
{
    coords:[23.6978, 120.9605],
    country:'Taiwan',
    label:'Taiwan',
},
{
    coords:[0.7892, 113.9213],
    country:'Indonesia',
    label:'Indonesia',
},
];
// Edit marker icons
var myIcon = L.icon({
    iconUrl: 'yellowcircle.png',
    iconSize: [40, 40], // size of the icon
    // iconAnchor: [],
    // popupAnchor: [],
});
// Loop through markers
for(var i = 0; i<markers.length; i++){
    addMarker(markers[i]);
}
// To add the marker coordinates
function addMarker(props){
    var marker = L.marker(props.coords, {icon:     myIcon}).bindTooltip(props.country).addTo(mymap);
marker.on('mouseover', function(e){
    marker.openPopup(); 
});
marker.on('mouseout', function(e){
    marker.closePopup();
});

}

A:

setOpacity() is from Dom Util
https://leafletjs.com/reference-1.6.0.html#domutil-setopacity

var mymap = L.map('map', {
  center: [20.594, 78.962],
  zoom: 4,
  zoomSnap: 0.25,
  zoomDelta: 0.25,
  minZoom: 3.25,
  maxZoom: 6,
  zoomControl: true
});

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mymap);


mymap.zoomControl.setPosition('topright');

L.DomUtil.setOpacity(mymap.zoomControl.getContainer(), 0.5);
#map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>

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

