How do I change the black color to transparent so that it is see-through?

HTML-CSS
1

https://jsfiddle.net/e39mub8L/

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

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;
}
2

you can specify each color with 8 digits where the last 2 digits represent the opacity: e.g. #aaaaaaff
Does this help?

3

Can you show me it working in the code, if that does work?

4

I just realized you want to use custom properties. With custom properties this does not work. you have to specify the color like this:
–color-b: rgba(0, 0, 0, 0.5);

5

Can you show me it working in the code?

Still can’t figure it out.

6

If you require a see through colour, use transparent.

div {
  background: transparent;
}

The background will take on whatever colour the element is covering.

Happy coding

7

I am trying to be able to place an image behind it where the gradient is see-through.

8

Wherever the tranparent colour is used,
the background colour of a nearby linear-gradient will show.

image

image

So I’m not sure how it can work with background-image.

You could use background-repeat instead.

Happy coding

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.