CODEWITHSUNDEEP
htmlcsstransparencyopacity
Dan
Dan

Reputation: 7744

Shape which makes everything underneath it, and itself, transparent

I am trying to find/make some code which allows you to set an object and everything below it, until the background, have zero opacity.

The following code creates a webpage which looks a like this.

Webpage

HTML File

<!DOCTYPE html>
<html>
    <head>
        <link href="./css/testStyle.css" rel="stylesheet">
    </head>
    <body>
        <div id="layer2"></div>
        <div id="layer3"></div>
    </body>
</html>

CSS File

body {
    background-color: red;
    background: -webkit-linear-gradient(left, grey, grey 30%, white 30%, white);
}

#layer2 {
    width: 300px;
    height: 300px;
    background: blue;
    border:solid 1px #fff;
    position: absolute;
    z-index:100;
    top:30px;
    left:150px;
}

#layer3 {
    width: 500px;
    height: 20px;
    background: black;
    border:solid 1px #fff;
    position: absolute;
    z-index:200;
    top:100px;
    left:80px;
}

Is it possible to make it look like this.

transparent black bar

I have looked into things like

#layer3 {
    ...
    opacity: 0.0;
}

However, that obviously only makes the layer3 not visible, not everything underneath it.

I would appreciate any help in accomplishing this.

Upvotes: 0

Views: 90

Answers (1)

H&#229;ken Lid
H&#229;ken Lid

Reputation: 23064

What you ask for sounds a bit like making a house invisible by painting the walls with transparent paint. I don't think it's possible to do with css. But you can fake something that might be good enough by using a top layer which looks identical to the bottom layer and using a clipping mask.

Expand the snippet to see the result. I changed the background gradient to work with my browser, but otherwise it's pretty similar to your code.

#layer3 {
  padding: 0;
  margin: 0;
  position: absolute;
  z-index: 200;
  top: 0;
  left: 0;
  height: 100%;
  clip: rect(100px, 580px, 120px, 80px);
  width: 100%;
}


body,
#layer3 {
  padding: 0;
  margin: 0;
  background: -webkit-linear-gradient(left, white, black);
  background: -o-linear-gradient(right, white, black);
  background: -moz-linear-gradient(right, white, black);
  background: linear-gradient(to right, white, black);
  z-index: 0;
  position: relative;
}
#layer2 {
  width: 300px;
  height: 300px;
  background: blue;
  border: solid 1px #fff;
  position: relative;
  z-index: 100;
  top: 30px;
  left: 150px;
}
#layer3 {
  padding: 0;
  margin: 0;
  position: absolute;
  z-index: 200;
  top: 0;
  left: 0;
  height: 100%;
  clip: rect(100px, 580px, 120px, 80px);
  width: 100%;
}
<!DOCTYPE html>
<html>

<head>
  <link href="./css/testStyle.css" rel="stylesheet">
</head>

<body>
  <div id="layer2"></div>
  <div id="layer3">hi</div>
</body>

</html>

Upvotes: 1

Related Questions