I added a transparent box using CSS to my main HTML. Within the box, I included an iframe that is linked to another frameset consisting of four frames.
<div class="box">
<h1>World Map</h1>
<iframe style="border:2px solid black;" src="map/mapframes.html" width="75%" height="960"></iframe>
</div>
CSS:
div.box {
display: block;
margin: auto;
width: 85%;
margin-top: 50px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.95;
filter: alpha(opacity=95);
z-index: 5;
font-family: Arial;
text-align: center;
}
One of the frames contains
<!doctype html>
<html>
<body bgcolor="#FFFFFF">
<img src="img/s.png" width="1125" height="558.5">
</body>
</html>
This code simply displays a single image. However, since it is part of the frameset within the div, its opacity is also affected. How can I ensure that the image retains an opacity of 1.00 while keeping the rest of the content within the div at 0.95 opacity?