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;
}
Sunum
<script></script>
<script></script>
<script></script>
<script></script>
<script></script>
<script></script>
<script></script>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script> async defer></script>
