Create a transparent window in a div background with css and javascript

Question

I'm trying to implement an effect in a webpage. The webpage must be fully covered with a background with a transparent window (this window will basically highlight some page of the page to draw user's attention). The size of the window is unknown beforehand and the effect must be implemented in the frontend. So I'm free to use html, css and js.

I don't know a way this effect can be achieved with css only. And I cannot use something like a png image background, because the size and the dimensions of the transparent window will change dynamically. I'm thinking of generating canvas for and use it as a background image for the div element.

Is this possible to generate a canvas as per my example image and use it as a background? Can you, please, provide an example? Thanks.

Please follow the site guidelines, which clearly requires asker to show their attempts in the question — Andreas, Oct 08 '19 at 10:03

score 7 · Accepted Answer · answered Oct 08 '19 at 09:03

Use a giant box-shadow:

body {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3999/Tilt-Shift_-_Cityscene.jpg);
  background-size: cover;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.window {
  width: 150px;
  height: 150px;
  border: 5px solid red;
  box-shadow: 0 0 0 99999px rgba(0, 255, 0, .25)
}

<div class="window"></div>

Dacre Denny · Answer 2 · 2019-10-08T09:20:29.297

Another approach would be via the clip-path CSS property, where the clip path is used to define the visible region of the green "overlay".

Using the Clippy tool, you can modify the "frame" clip-path (from the tools preset library) to suit your needs. Here's an example of how the technique can be used to achieve what you require, and what each coordinate of the clip-path corresponds to:

.overlay {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,255,0,0.5);

  /* Defines the portion of the green overlay to be drawn and clipped */
  clip-path: polygon(
    0% 0%, 
    0% 100%, 
    25% 100%, /* Bottom left sideline of clipped rectangle */
    25% 25%, /* Top left corner of clipped rectangle */
    75% 25%, /* Top right corner of clipped rectangle */
    75% 75%, /* Bottom right corner of clipped rectangle */
    25% 75%,  /* Bottom left corner of clipped rectangle */
    25% 100%, /* Bottom left baseline of clipped rectangle */
    100% 100%,
    100% 0%);
}

<div class="overlay"></div>
<img src="https://images.unsplash.com/photo-1505811210036-052144988918?w=1080" />

You could then generalize a solution for a visible rectangular region based on a clip-path with JavaScript like this:

/* Calculates clip paths with rectangular "cutout" for specified element  */
const setClipPath = (element, { left, top, width, height }) => {
 
  element.style.clipPath = `polygon(
    0% 0%, 
    0% 100%, 
    ${left}% 100%,
    ${left}% ${top}%,
    ${left + width}% ${top}%,
    ${left + width}% ${top + height}%,
    ${left}% ${top + height}%,
    ${left}% 100%,
    100% 100%,
    100% 0%)
  `;
}

setClipPath(document.querySelector(".overlay"), {
  top : 10, 
  left : 10, 
  width : 30, 
  height : 30
});

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 255, 0, 0.5);
}

<div class="overlay"></div>
<img src="https://images.unsplash.com/photo-1505811210036-052144988918?w=1080" />

Even though I went with the box-shadow answer. Thanks for adding the `clip-path` solution. — sr9yar, Oct 08 '19 at 09:36

Temani Afif · Answer 3 · 2019-10-08T09:35:43.243

Another idea using border

Reponsive

body {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3999/Tilt-Shift_-_Cityscene.jpg);
  background-size: cover;
}

.window {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-style:solid;
  border-width:20vh 30vw;
  border-color:rgba(0, 255, 0, .25);
}

<div class="window"></div>

Or with fixed sizes

body {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3999/Tilt-Shift_-_Cityscene.jpg);
  background-size: cover;
}

.window {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-style:solid;
  border-width:calc(50vh - 80px) calc(50vw - 100px);
  border-color:rgba(0, 255, 0, .25);
}

<div class="window"></div>

score 1 · Answer 4 · answered Oct 08 '19 at 09:24

Create a single div that fills the entire screen. The transparent window is the the inside of the div, and the transparent background is the border. Using CSS, use the border-width properties to control the window's position, and use the height and width properties to set the window's size.

#overlay {
  /* full page overlay */
  position: fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  z-index: 2;
  
  /* window size */
  width: 150px;
  height: 20px;
  
  /* window position */
  border-top: 50px;
  border-left: 50px;
  border-bottom: 10000px;
  border-right: 10000px;
  
  /* window colour */
  background-color: rgba(0,0,0,0);
  
  /* frame colour */
  border-style: solid;
  border-color: rgba(50,150,250,0.5);

}

p {
  margin: 50px;
}

<html>
  <body>
    <p>A paragraph of text</p>
    <div id="overlay"></div>
  </body>
</html>

Create a transparent window in a div background with css and javascript

4 Answers4

Linked