-9

How can I make a so-called mask out of a div. Hello I am looking for a solution to my problem and would be very grateful if someone could help me. I want you to see a background only through a div. If someone could help me I would be very grateful. Thanks a lot. Alex.

AlexB123003
  • 11
  • 1
  • 2
  • Are you talking about having a translucent div that has a background colour, so that you're essentially looking at a very slightly 'coloured' version of an image sitting behind it? – Obsidian Age Aug 11 '21 at 21:19
  • 1
    What did you search for before asking this question? There are many results for CSS masking – Andy Ray Aug 11 '21 at 21:20
  • 2
    Welcome to Stack Overflow. Please take the [tour] and read [ask] to find out how this site is different from forums and bulletin boards. One of the differences is that we expect a lot more out of questions from the start. Research, attempts, etc. are important. – Heretic Monkey Aug 11 '21 at 21:20
  • It can be hard to understand what you are asking for from your question. These links may be what you are looking for. https://stackoverflow.com/questions/4981705/css-create-a-transparent-div || https://stackoverflow.com/questions/11807286/how-to-make-div-background-color-transparent-in-css – async await Aug 11 '21 at 21:26
  • 1
    You should always try to include what code you have written first in addition to the question. When you just ask for a solution without providing code you will be downvoted into oblivion and then your account won't be allowed to ask new questions. – warnakey Aug 11 '21 at 21:32

1 Answers1

1

I think you are looking for something like this. Set the background div with an image then make the background color of the divs on top of it white, with only 1 of the divs not having a background set, allowing you to look through it.

Here is an example in JSfiddle https://jsfiddle.net/9yL1p2oq/

HTML

<body>
  <div class="background">
    <div class="toparea"></div>
    <div class="left"></div>
    <div class="window"></div>
    <div class="right"></div>
    <div class="bottomarea"></div>
  </div>
</body>

CSS

body {
  margin: 0;
}
.background {
  background-image: url('https://i.pinimg.com/originals/99/bb/69/99bb69e4680b0bc9c4c806f5f0f87ad5.png');
  background-attachment: fixed;
  float: left;
  width: 100%;
  height: 800px;
}
.toparea, .left, .right, .bottomarea {
  background: #fff;
}
.toparea, .bottomarea {
  float: left;
  width: 100%;
  height: 350px;
}
.left, .window, .right {
  float: left;
  width: 33.333%;
  height: 350px;
}
warnakey
  • 485
  • 2
  • 10