#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>怎樣才能讓黑色部分透明以顯示背后的背景，背景不會一直是白色的，可能是圖片，顏色部分是整體的漸變
uj5u.com熱心網友回復：
我記得在你的另一篇文章中看到你想要制作一個進度條（你應該提到這些事情，以便其他人更容易回答相關答案）。你可能想動態地改變高度或者用這個 div 來改變高度（模擬進度）。
您可以使用 css 屬性clip-path來實作漸變和透明背景之間交替的效果：
.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 class="container">
<div id="myElement"></div>
</div>uj5u.com熱心網友回復：
將 div myBar 的 id 屬性更改為 class 并將背景更改為白色。
我們可以使用 nth-child 選擇器 .myBar:nth-child(1),.myBar:nth-child(2) 等來定位每個 myBar 元素。我在下面添加了一個示例。
我們還可以通過在 css 定義中添加 background-image 屬性來使用影像作為背景。
#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 class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
</div>
uj5u.com熱心網友回復：
您可以使用 svg 屏蔽技術輕松創建它，因為使用 div 不起作用
正如您將在運行代碼片段時看到的那樣，影像位于 svg 后面，但看起來非常清晰，因為黑色部分現在是透明的。
#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>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/527470.html
上一篇：jquery改變樣式類屬性值
下一篇：棋盤式布局CSSJS