問題描述
無法獲得白色和灰色的 CSS 進度條 (Not able to get the CSS progress bar with white and grey)
我正在嘗試製作一個進度條，這是我的要求，如下圖所示：
我的代碼是：
<!DOCTYPE html>
<html>
<head>
<style>
.bar {
box‑sizing: content‑box;
height: 20px;
margin: 0 20px 50px;
padding‑bottom: 60px;
padding‑left: 50px;
padding‑right: 50px;
}
.bar span {
display: block;
height: 100%;
border‑top‑right‑radius: 20px;
border‑bottom‑right‑radius: 20px;
border‑top‑left‑radius: 20px;
border‑bottom‑left‑radius: 20px;
background‑color: rgb(0 0 0 / 26%);
position: relative;
}
.bar span:after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background‑size: 50px 50px;
background‑image: linear‑gradient(
‑45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent );
animation: move 2s linear infinite;
}
@keyframes move {
0% { background‑position: 0 0; }
100% { background‑position: 50px 50px; }
}
</style>
</head>
<body>
<div class="bar animate"><span style="width: 100%"></span></div>
</body>
</html>
我通過我的代碼得到了這個：
誰能幫我獲取確切的進度條或類似的，如預期的那樣，我哪裡出錯了？
提前致謝
參考解法
方法 1:
You need a background with repeating‑linear‑gradient
.background‑lines {
background: repeating‑linear‑gradient(‑45deg, grey,
grey 5px, white 5px, white 10px);
}<div class="background‑lines">
text if needed
</div>方法 2:
I am not saying this is the only way of fixing this. But you could just go ahead and invert the colors you have.
background‑image: linear‑gradient(
‑45deg,
rgb(0 0 0 / 20%) 25%,
transparent 25%,
transparent 50%,
rgb(0 0 0 / 20%) 50%,
rgb(0 0 0 / 20%) 75%,
transparent 75%,
transparent );
And invert the colors for this one as well:
background‑color: rgb(255 255 255 / 26%);
.bar {
box‑sizing: content‑box;
height: 20px;
margin: 0 20px 50px;
padding‑bottom: 60px;
padding‑left: 50px;
padding‑right: 50px;
}
.bar span {
display: block;
height: 100%;
border‑top‑right‑radius: 20px;
border‑bottom‑right‑radius: 20px;
border‑top‑left‑radius: 20px;
border‑bottom‑left‑radius: 20px;
background‑color: rgb(255 255 255 / 26%);
position: relative;
}
.bar span:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background‑size: 50px 50px;
background‑image: linear‑gradient(
‑45deg,
rgb(0 0 0 / 20%) 25%,
transparent 25%,
transparent 50%,
rgb(0 0 0 / 20%) 50%,
rgb(0 0 0 / 20%) 75%,
transparent 75%,
transparent );
animation: move 2s linear infinite;
}
@keyframes move {
0% {
background‑position: 0 0;
}
100% {
background‑position: 50px 50px;
}
}<body>
<div class="bar animate">
<span style="width: 100%"></span>
</div>
</body>方法 3:
You added your colors the wrong way. At first the background‑color from .bar span gets applied, resulting in a gray background for the whole bar. And at second the gradient from .bar span:after get's appliced since it comes AFTER the actual html element.
Therefore just swap your colors and you are good to go. So the white/transparent color on your span and the gray color on your :after.
Like so:
body {
background: white;
}
.bar {
box‑sizing: content‑box;
height: 20px;
margin: 0 20px 50px;
padding‑bottom: 60px;
padding‑left: 50px;
padding‑right: 50px;
}
.bar span {
display: block;
height: 100%;
border‑top‑right‑radius: 20px;
border‑bottom‑right‑radius: 20px;
border‑top‑left‑radius: 20px;
border‑bottom‑left‑radius: 20px;
background‑color: rgba(255, 255, 255, .2);
position: relative;
}
.bar span:after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background‑size: 50px 50px;
background‑image: linear‑gradient(
‑45deg, rgba(0, 0, 0, .26) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .26) 50%, rgba(0, 0, 0, .26) 75%, transparent 75%, transparent );
animation: move 2s linear infinite;
}
@keyframes move {
0% { background‑position: 0 0; }
100% { background‑position: 50px 50px; }
}<div class="bar animate"><span style="width: 100%"></span></div>Also keep in mind, as soon as you change the background color for the outer container for your bar (eg. body tag), the bar wil result in another color as well, since you are using transparent colors.
(by SaAsh Techs、mia‑wallace、Reality‑Torrent、Hoargarth)