Currently, I am in the process of developing a website dedicated to my hometown using Wordpress. To enhance the viewing experience for users, I adjusted the transparency of the main div so that they can fully appreciate the background image. While this modification has been successful, I have encountered an issue with integrating a Google Maps box on the site. Due to both elements sharing the main div, the transparency effect is also applied to the Google Maps box, making it difficult to discern.
Does anyone know of a way to exempt the Google Maps box from inheriting the transparency of the main div?
I would greatly appreciate any suggestions or solutions to this problem.
The following CSS3 code snippet showcases the styling used for the main div and the Google Maps box:
.cbox {
overflow: hidden;
width: 958px;
margin: 0 auto;
padding: 20px 0 0 0;
background: url("images/cbox.png") center 1px no-repeat;
background-color: rgba(0, 0, 0, 0.8);
}
.gmapsframe {
background-color: rgba(0, 0, 0, 1);
}
Unfortunately, it appears that the solution provided does not yield the desired outcome.’