How can I make the black part transparent to show the white background？-CodePudding

#myElement {
  width: 50px;
  height: 300px;
  background: linear-gradient(0deg, #4a94cd, #fe49a6);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

#myBar {
  width: 100%;
  height: 10px;
  background: #000;
}

<div id="myElement">
  <div id="myBar"></div>
  <div id="myBar"></div>
  <div id="myBar"></div>
  <div id="myBar"></div>
  <div id="myBar"></div>
  <div id="myBar"></div>
  <div id="myBar"></div>
  <div id="myBar"></div>
  <div id="myBar"></div>
  <div id="myBar"></div>
</div>

How can I make the black part transparent to show the background behind，The background won't always be white，maybe a picture，The color part is a gradient of the whole

CodePudding user response：

Change the id attribute to class for the div myBar and change the background to white.

We can target each of myBar elements using nth-child selector .myBar:nth-child(1),.myBar:nth-child(2) and so on. I have added a sample below.

We can also use images as background by adding background-image property to the css definition.

#myElement {
  width: 50px;
  height: 300px;
  background: linear-gradient(0deg, #4a94cd, #fe49a6);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.myBar {
  width: 100%;
  height: 10px;
  background: white;
}

.myBar:nth-child(1){
  background:red;
}


----------
<div id="myElement">
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

CodePudding user response：

I remember seeing in another post of yours that you want to make a progress bar (you should mention these things to make it easier for others to answer with relevant answers). And you probably want to change the height dynamically or something with this one div (to simulate the progress).

You can use the css property clip-path to achieve the effect of alternating between your gradient and a transparent background:

.container {
  background: url(https://picsum.photos/id/999/360);
  padding: 20px;
  width: 320px;
}

#myElement {
  width: 50px;
  height: 320px;
  background: linear-gradient(0deg, #4a94cd, #fe49a6);
  clip-path: polygon(
    0 0,100% 0,100% 20px,0 20px,
    0 30px,100% 30px,100% 50px,0 50px,
    0 60px,100% 60px,100% 80px,0 80px,
    0 90px,100% 90px,100% 110px,0 110px,
    0 120px,100% 120px,100% 140px,0 140px,
    0 150px,100% 150px,100% 170px,0 170px,
    0 180px,100% 180px,100% 200px,0 200px,
    0 210px,100% 210px,100% 230px,0 230px,
    0 240px,100% 240px,100% 260px,0 260px,
    0 270px,100% 270px,100% 290px,0 290px,
    0 300px,100% 300px,100% 320px,0 320px
  );
}

<!--
  I just added the container to show a background image behind
  the element with the clip-path
-->
<div >
  <div id="myElement"></div>
</div>

CodePudding user response：

You can create it easily using svg masking technique because using divs will not work
As you will see on running the snippet that the image is behind the svg but looks very clear as the black part is now transparent.

#myElement {
  width: 50px;
  height: 300px;
  position: relative;
}
img{
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;

}

<!DOCTYPE html>
<html lang="en">

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

<body>
  <svg width="50" height="300" id="myElement">
    <defs>
      <linearGradient xl=0 x2=0 y1=0 y2=1 id="Gradient">
        <stop stop-color="#fe49a6" offset="0%" />
        <stop stop-color="#4a94cd" offset="100%" />
      </linearGradient>
      <pattern id="pattern" x="0" y="0" width="50" height="30" patternUnits="userSpaceOnUse">
        <rect x=0 y=0 width=50 height=20 fill="#999" />
      </pattern>
      <mask id="mask-gradient" x="0" y="0" width="50" height="300">
        <rect x="0" y="0" width="50" height="300" fill="url(#pattern)" />
      </mask>
    </defs>
    <rect id="rect1" fill=url(#Gradient) x="0" y="0" width="50" height="300" mask="url(#mask-gradient)" />
  </svg>
  </div>
<img src="https://images.unsplash.com/photo-1667400104714-53da4894bf18?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80">
</body>

</html>

CodePudding user response：

This is a job for mask

#myElement {
  width: 50px;
  height: 300px;
  background: linear-gradient(0deg, #4a94cd, #fe49a6);
  -webkit-mask: linear-gradient(0deg,#0000 10px, #000 0) 0 0/100% 10%;
}

body {
  background: orange;
}

<div id="myElement">
</div>