How to change opacity of image imported as Icon in KML document?

I am trying to modify the opacity of an image imported as an icon in a KML document. How do I achieve this objective ? Please be patient with me, I am a beginner in programming.

As per Google's documentation I have tried to use Style and IconStyle tags around the Icon tag and mentioned opacity0.4opacity as well as color#64ffffffcolor and color#66ffffffcolor but it doesn't work.

I have also tried to insert only opacity or color tags around the icon without the Style and IconStyle tags, it doesn't work either.

Test environment : http://display-kml.appspot.com/ Google's reference documentation : https://developers.google.com/kml/documentation/kmlreference

<Document>
<Name>World Atlas Artificial Night Sky Brightness</Name>
<GroundOverlay>
<name>ArtificialSkyBrightness537.JPG</name>
<drawOrder>15</drawOrder>
<color>64ffffff</color>
<Description></Description>
<Icon>
<href>https://nightskybrightness.s3.eu-west-3.amazonaws.com/ArtificialSkyBrightness537.JPG</href>
<color>#64ffffff</color>
</Icon>
<LatLonBox>
<north>50.9375138445</north>
<south>42.4041839245</south>
<east>4.2499263</east>
<west>-4.12507035</west>
<rotation>0</rotation>
</LatLonBox>
</GroundOverlay>
</Document>

Expected result : 40% opacity Actual result : No change in opacity

Solution

You can't modify the Opacity of your image right inside the KML.

One way to achieve this could be by using a PNG image with already desired opacity.

the other way is by setting a custom CSS class.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'));
  var kmlLayer = new google.maps.KmlLayer({
    url: 'https://demo.woosmap.com/stackoverflow/testkmlalpha.kml',
    //to test with css use the following URL:
    //url: 'https://demo.woosmap.com/stackoverflow/testkml.kml',
    map: map
  });
}

#map img[src*="googleusercontent.com"] {
  opacity: 0.4;
}

Here is a jsFiddle sample:

https://jsfiddle.net/woosmap/3za64ksx/