Tekil Mesaj gösterimi - CSS Opacity Sorunu

Konu CSS Opacity Sorunu

26-03-2019, 13:21:46

Merhaba Arkadaşlar,

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>