Yapmaya çalıştığım şey en alttaki görselin aynısını elde etmek. Fakat opacity koymama rağmen tamamı kapsıyor. Ama ben sadece grafiklerin arkaplanını soldurmasını istiyorum grafikleri değil. Ne yapabilirim?
.left-side classı sol tarafı kaplayan kısım opacityi bu kısma veriyorum.
#a,#b,#c id'leri ise soldaki grafikler.
ŞUANKİ HALİ
OLMASI GEREKEN
html,body, .grid-container { height: 100%; margin: 0; }
span {font-size: 1vw;}
.grid-container * {
position: relative;
}
.grid-container *:after {
position: absolute;
top: 0;
left: 0;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-template-areas: "map map map map map" "map map map map map" "map map map map map" "map map map map map";
}
.container {
z-index: 0;
}
#map, .container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 0.5fr 1fr 1fr 1fr;
grid-template-areas: "logo-left . . . logo-right" "left-side . . . right-side" "left-side . . . right-side" "left-side bottom-side bottom-side bottom-side right-side";
grid-area: map;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.left-side {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "a" "b" "c";
grid-area: left-side;
background-color: midnightblue;
opacity: 0.4;
}
#a {
position: relative;
grid-area: a;
background-color: #0e2973;
border: 2px solid white;
border-radius: 40px 5px 40px 2px;
margin: 5px;
}
#b {
grid-area: b;
background-color: #0e2973;
border: 2px solid white;
border-radius: 40px 5px 40px 2px;
margin: 5px;
}
#c {
grid-area: c;
background-color: #0e2973;
border: 2px solid white;
border-radius: 40px 5px 40px 2px;
margin: 5px;
}
.right-side {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "d" "e" "f";
grid-area: right-side;
background-color: midnightblue;
opacity: 0.4;
}
#d {
grid-area: d;
background-color: #0e2973;
border: 2px solid white;
border-radius: 40px 5px 40px 2px;
margin: 5px;
}
#e {
grid-area: e;
background-color: #0e2973;
border: 2px solid white;
border-radius: 40px 5px 40px 2px;
margin: 5px;
}
#f {
grid-area: f;
background-color: #0e2973;
border: 2px solid white;
border-radius: 40px 5px 40px 2px;
margin: 5px;
}
.bottom-side {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
grid-template-areas: "b1 b2";
grid-area: bottom-side;
opacity: 0.4;
}
#b1 {
grid-area: b1;
background-color: #0e2973;
border: 2px solid white;
border-radius: 20px;
margin: 5px;
}
#b2 {
grid-area: b2;
background-color: #0e2973;
border: 2px solid white;
border-radius: 20px;
margin: 5px;
}
.logo-left {
grid-area: logo-left;
font-size:3vw;
color: white;
background-color: midnightblue;
opacity: 0.4;
}
.logo-right {
grid-area: logo-right;
font-size:3vw;
color: white;
background-color: midnightblue;
opacity: 0.4;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sunum</title>
<link href='style1.css' rel='stylesheet'>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/variable-pie.js"></script>
</head>
<body>
<div id="map"></div>
<div class="grid-container">
<div class="container">
<div class="left-side">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</div>
<div class="right-side">
<div id="d"></div>
<div id="e"></div>
<div id="f"></div>
</div>
<div class="bottom-side">
<div id="b1"></div>
<div id="b2"></div>
</div>
<div class="logo-left"></div>
<div class="logo-right"></div>
</div>
</div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDzVWNVDoBdXY6kxdxX4rYuZDkk9VZUsSg&callback=initMap"
async defer></script> 
