Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make the background(transparent) of box items, the background of the body with CSS?

Tags:

html

css

There is one box in the photo below and there are round circles inside the box. The background of the box has a wood pattern, but the background of the elements inside the box is transparent(body background).

Picture

I developed the design as in the picture with CSS, but I have no idea how to make the background of the box elements transparent.

My Codes:

body {
  background: #603813;
  background: -webkit-linear-gradient(to right, #b29f94, #603813);
  background: linear-gradient(to right, #b29f94, #603813);
}

.box {
  width: 400px;
  height: auto;
  background: url('https://images.unsplash.com/photo-1538645731800-4640c639bba7');
  background-size: cover;
  margin-left: calc(50vw - 200px);
  display: grid;
  grid-gap: 1em;
  grid-template-rows: repeat(6, auto);
  grid-template-columns: repeat(4, auto);
  padding: 10px;
  margin-top: 15%;
}

.element {
  width: 3em;
  height: 3em;
  border-radius: 50%;
  border: 2px solid #000;
}
<div class="box">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

How to make the background(transparent) of box items, the background of the body with CSS ?

like image 490
Mustafa Avatar asked Jan 26 '23 08:01

Mustafa


2 Answers

You can combine it with background-attachment: fixed. This achieves the desired result.

fixed: stays fixed no matter what. It's kind of like a physical window: moving around the window changes your perspective, but it doesn't change where things are outside of the window.

:root {
  --body-bg: linear-gradient(to right, #b29f94, #603813);
}

body {
  background-color: #603813;
  background-image: var(--body-bg);
  background-attachment: fixed;
}

.box {
  width: 400px;
  height: auto;
  background: lime;
  background: url('https://images.unsplash.com/photo-1538645731800-4640c639bba7');
  background-size: cover;
  margin-left: calc(50vw - 200px);
  display: grid;
  grid-gap: 1em;
  grid-template-rows: repeat(6, auto);
  grid-template-columns: repeat(4, auto);
  padding: 10px;
  margin-top: 15%;
}

.element {
  width: 3em;
  height: 3em;
  border-radius: 50%;
  border: 2px solid #000;
  background-image: var(--body-bg);
  background-attachment: fixed;
}
<div class="box">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>
like image 166
doğukan Avatar answered Feb 20 '23 14:02

doğukan


To have a real transparency you can consider mask like below:

body {
  background: #603813;
  background: linear-gradient(to right, #b29f94, #603813);
}

.box {
  width: 400px;
  height: 400px;
  margin-left: calc(50vw - 200px);
  margin-top:15%;
  
  background: 
    /* Create the black border*/
    radial-gradient(farthest-side, black 70%,transparent 73%) 0 0/4em 4em round,
    url('https://images.unsplash.com/photo-1538645731800-4640c639bba7') center/cover;
  /* create the holes*/
  -webkit-mask:radial-gradient(farthest-side, transparent 66%,#fff 67%) 0 0/4em 4em round;
          mask:radial-gradient(farthest-side, transparent 66%,#fff 67%) 0 0/4em 4em round;
}
<div class="box">
</div>

You can also keep your elements inside if you want:

body {
  background: #603813;
  background: linear-gradient(to right, #b29f94, #603813);
}

.box {
  width: calc(8*4em);
  height: calc(4*4em);
  margin: 15% auto;
  display: flex;
  flex-wrap: wrap;
  position:relative;
  z-index:0;
}
.box:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: url('https://images.unsplash.com/photo-1538645731800-4640c639bba7') center/cover;
  /* create the holes*/
  -webkit-mask: radial-gradient(circle 1.5em, transparent 98%, #fff 100%) 0 0/4em 4em;
          mask: radial-gradient(circle 1.5em, transparent 98%, #fff 100%) 0 0/4em 4em;
}
.element {
  width: 3em;
  height: 3em;
  margin: 0.5em;
  border-radius: 50%;
  border: 2px solid red;
  box-sizing: border-box;
}
<div class="box">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>
like image 20
Temani Afif Avatar answered Feb 20 '23 16:02

Temani Afif