如何将黑色改为透明，使其透明？

Question

如何将此处的黑色更改为透明？

这就是我在代码中尝试做的所有事情，使黑色透明。

我不断尝试不同的东西，颜色不断相互融合。

这里有人知道如何做到这一点，这样颜色就不会相互融合吗？

由于主体颜色是绿色，因此当黑色设置为透明时，我应该看到代替黑色的颜色。

https://jsfiddle.net/e39mub8L/

:root {
--color-a: #1155cc;
--color-b: black;
--color-c: #1155cc;
--color-d: black;
}

:root {
  --color-a: #1155cc;
  --color-b: black;
  --color-c: #1155cc;
  --color-d: black;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: green;
  padding: 50px 8px;
}

.panel-left,
.panel-right {
  position: fixed;
  height: 100%;
  width: 50%;
  top: 0%;
  overflow: hidden;
  z-index: 0;
  transform: translateX(0);
  transition: transform 7s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition-delay: 1s;
}

.panel-left {
  left: 0;
}

.panel-right {
  right: 0;
}

.panel-left::before,
.panel-right::before {
  content: "";
  position: fixed;
  height: 100%;
  width: 200%;
  top: 0;
  left: 0;
  background-image: linear-gradient(var(--color-a) 5px, #0000 5px),
    linear-gradient(90deg, var(--color-a) 5px, #0000 5px),
    linear-gradient(var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
    linear-gradient(
      90deg,
      var(--color-b) 10px,
      #0000 10px 160px,
      var(--color-b) 160px
    ),
    linear-gradient(var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
    linear-gradient(
      90deg,
      var(--color-c) 15px,
      #0000 15px 155px,
      var(--color-c) 155px
    ),
    linear-gradient(var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
    linear-gradient(
      90deg,
      var(--color-d) 20px,
      #0000 20px 150px,
      var(--color-d) 150px
    ),
    linear-gradient(var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),
    linear-gradient(
      90deg,
      var(--color-a) 25px,
      #0000 25px 145px,
      var(--color-a) 145px
    ),
    linear-gradient(var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),
    linear-gradient(
      90deg,
      var(--color-b) 30px,
      #0000 30px 140px,
      var(--color-b) 140px
    ),
    linear-gradient(var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),
    linear-gradient(
      90deg,
      var(--color-c) 35px,
      #0000 35px 135px,
      var(--color-c) 135px
    ),
    linear-gradient(var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),
    linear-gradient(
      90deg,
      var(--color-d) 40px,
      #0000 40px 130px,
      var(--color-d) 130px
    ),
    linear-gradient(var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),
    linear-gradient(
      90deg,
      var(--color-a) 45px,
      #0000 45px 125px,
      var(--color-a) 125px
    ),
    linear-gradient(var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),
    linear-gradient(
      90deg,
      var(--color-b) 50px,
      #0000 50px 120px,
      var(--color-b) 120px
    ),
    linear-gradient(var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),
    linear-gradient(
      90deg,
      var(--color-c) 55px,
      #0000 55px 115px,
      var(--color-c) 115px
    ),
    linear-gradient(var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),
    linear-gradient(
      90deg,
      var(--color-d) 60px,
      #0000 60px 110px,
      var(--color-d) 110px
    ),
    linear-gradient(var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),
    linear-gradient(
      90deg,
      var(--color-a) 65px,
      #0000 65px 105px,
      var(--color-a) 105px
    ),
    linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),
    linear-gradient(
      90deg,
      var(--color-b) 70px,
      #0000 70px 100px,
      var(--color-b) 100px
    ),
    linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
    linear-gradient(
      90deg,
      var(--color-c) 75px,
      #0000 75px 95px,
      var(--color-c) 95px
    ),
    linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
    linear-gradient(
      90deg,
      var(--color-d) 80px,
      #0000 80px 90px,
      var(--color-d) 90px
    ),
    linear-gradient(var(--color-a), var(--color-a));
  background-size: 165px 165px;
}

.panel-right::before {
  left: -100%;
}

.container:hover .panel-left {
  transform: translateX(-100%);
}

.container:hover .panel-right {
  transform: translateX(100%);
}

<div class="container">
  <div class="panel-left">
  </div>
  <div class="panel-right">
  </div>
</div>

Answer 1

html{
  background:url(https://picsum.photos/id/50/2000/1000) center;
  background:size:cover;
}

body {
  min-height:100vh;
  background-image: url("data:image/svg+xml,%3Csvg width='165' height='165' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='5' width='155' height='155' style='fill:%230000;stroke-width:5;stroke:red' /%3E%3Crect x='15' y='15' width='135' height='135' style='fill:%230000;stroke-width:5;stroke:blue' /%3E%3Crect x='25' y='25' width='115' height='115' style='fill:%230000;stroke-width:5;stroke:red' /%3E%3Crect x='35' y='35' width='95' height='95' style='fill:%230000;stroke-width:5;stroke:blue' /%3E%3Crect x='45' y='45' width='75' height='75' style='fill:%230000;stroke-width:5;stroke:red' /%3E%3Crect x='55' y='55' width='55' height='55' style='fill:%230000;stroke-width:5;stroke:blue' /%3E%3Crect x='65' y='65' width='35' height='35' style='fill:%230000;stroke-width:5;stroke:red' /%3E%3Crect x='75' y='75' width='15' height='15' style='fill:%230000;stroke-width:5;stroke:blue' /%3E%3C/svg%3E");
}