将绿色水平线保持在 2px 值
Keeping green horizontal lines at 2px value
如果我想将绿色水平线保持在 2px 值，我该如何在代码中做到这一点？
https://jsfiddle.net/2d7mha0e/1/
如何在代码中完成？
这些是最初的 px 值。
background: linear-gradient(to bottom, transparent 0, transparent 72px, green 72px, green 74px, transparent 74px, transparent 108px, green 108px, green 110px, transparent 110px, transparent 144px, green 144px, green 146px, transparent 146px, transparent 180px, green 180px, green 182px, transparent 182px, transparent 216px, green 216px, green 218px, transparent 218px, transparent 252px, green 252px, green 254px, transparent 254px, transparent 288px, green 288px, green 290px, transparent 290px, transparent 360px);
background-size: 640px 360px;
这是一次尝试：
我将绿色更改为 px 值，但没有用。 https://jsfiddle.net/cr0zeumL/
background: linear-gradient(to bottom, transparent 0, transparent 20%, green 72px, green 74px, transparent 20.556%, transparent 30%, green 108px, green 110px, transparent 30.556%, transparent 40%, green 144px, green 146px, transparent 40.556%, transparent 50%, green 180px, green 182px, transparent 50.556%, transparent 60%, green 216px, green 218px, transparent 60.556%, transparent 70%, green 252px, green 254px, transparent 70.556%, transparent 80%, green 288px, green 290px, transparent 80.556%, transparent 100%);
background-size: 177.778% 100%;
}
这是我提供的代码片段，其中我试图将绿色水平线保持在 2px 值。
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
--color-a: blue;
--color-b: black;
--color-c: red;
--color-d: black;
background-size: 165px 165px;
background-image:
linear-gradient(var(--color-a) 5px, #0000 5px),
linear-gradient(90deg, var(--color-a) 5px, #0000 5px),
linear-gradient(var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
linear-gradient(90deg, var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
linear-gradient(var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
linear-gradient(90deg, var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
linear-gradient(var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
linear-gradient(90deg, var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
linear-gradient(var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),
linear-gradient(90deg, var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),
linear-gradient(var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),
linear-gradient(90deg, var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),
linear-gradient(var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),
linear-gradient(90deg, var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),
linear-gradient(var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),
linear-gradient(90deg, var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),
linear-gradient(var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),
linear-gradient(90deg, var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),
linear-gradient(var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),
linear-gradient(90deg, var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),
linear-gradient(var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),
linear-gradient(90deg, var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),
linear-gradient(var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),
linear-gradient(90deg, var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),
linear-gradient(var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),
linear-gradient(90deg, var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),
linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),
linear-gradient(90deg, var(--color-b)70px, #0000 70px 100px, var(--color-b) 100px),
linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
linear-gradient(90deg, var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
linear-gradient(90deg, var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
linear-gradient(var(--color-a), var(--color-a));
}
.outer {
display: flex;
min-height: 100vh;
align-content: center;
}
.ratio-keeper {
position: relative;
height: 0;
padding-top: 56.25%;
margin: auto;
overflow: hidden;
border: 1px solid #333;
}
.curtain {
flex: 1 0 0;
margin: auto;
max-width: 641px;
box-shadow: inset 0 -2px 0px 0px #0a0a0a;
border: 10px solid #000;
border-radius: 3.2px;
border-color: #000 #101010 #000 #101010;
background-image: linear-gradient(45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px),
linear-gradient(-45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px);
background-size: 10px 10px;
filter: drop-shadow(0 0 5px #000);
}
.fence {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: linear-gradient(to bottom, transparent 0, transparent 20%, green 20%, green 20.556%, transparent 20.556%, transparent 30%, green 30%, green 30.556%, transparent 30.556%, transparent 40%, green 40%, green 40.556%, transparent 40.556%, transparent 50%, green 50%, green 50.556%, transparent 50.556%, transparent 60%, green 60%, green 60.556%, transparent 60.556%, transparent 70%, green 70%, green 70.556%, transparent 70.556%, transparent 80%, green 80%, green 80.556%, transparent 80.556%, transparent 100%);
background-size: 177.778% 100%;
}
.fan svg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 70%;
height: 70%;
animation: fan-spin 8s linear;
}
@keyframes fan-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.cross::before,
.cross::after {
content: "";
background: red;
}
.cross::before
/*horizontal*/
{
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
/*width: 100%;*/
height: 2.8%;
/*height: 10px;*/
}
.cross::after
/*vertical*/
{
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
/*width: 10px;*/
width: 1.5%;
/*height: 100%;*/
}
<div class="outer">
<div class="curtain ">
<div class="ratio-keeper">
<div class="fence"></div>
<div class="fan">
<svg xmlns="http://www.w3.org/2000/svg" width="70%" height="70%" viewBox="76 130 381 381">
<path fill="#000100" stroke="#000" d="m166.3352 168.6294c5.5396 2.4448 45.2339 54.394 72.7499 91.0151-9.1901-44.8757-21.7959-109.0279-19.9558-114.796 4.1462-12.9949 33.7039-13.5172 41.5845-13.7579 7.8827-.2415 37.4165-1.5221 42.3488 11.1948 2.1872 5.6436-6.4773 70.4506-12.9142 115.8007 25.2309-38.2323 61.6818-92.5089 67.0612-95.2865 12.119-6.2568 33.3898 14.2749 39.1337 19.6768 5.7424 5.402 27.5341 25.3815 22.0294 37.859-2.4441 5.5389-54.3954 45.2354-91.0172 72.7506 44.8757-9.1901 109.0293-21.7959 114.7974-19.9559 12.9927 4.1442 13.5193 33.7032 13.7586 41.5838.2422 7.8819 1.5221 37.4165-11.192 42.3473-5.6471 2.1894-70.4541-6.4765-115.8049-12.9127 38.2323 25.2323 92.5081 61.6783 95.2871 67.0605 6.2581 12.1175-14.2742 33.3877-19.6776 39.133-5.4027 5.7432-25.3815 27.5341-37.8563 22.0279-5.5396-2.4434-45.2361-54.3961-72.7534-91.0143 9.1901 44.8757 21.7952 109.0287 19.9551 114.7953-4.1434 12.9934-33.7026 13.5157-41.5852 13.7586-7.8799.24-37.4165 1.5221-42.3431-11.1936-2.1887-5.6464 6.4779-70.4541 12.9133-115.8071-25.2323 38.2323-61.6824 92.5124-67.0639 95.2908-12.1169 6.256-33.3891-14.2728-39.1337-19.6754-5.7432-5.4027-27.5313-25.383-22.0251-37.8578 2.4434-5.5396 54.394-45.2339 91.0136-72.7526-44.8764 9.1908-109.0266 21.7944-114.7967 19.9566-12.9934-4.1434-13.5171-33.7025-13.7586-41.5852-.2407-7.8806-1.5221-37.4165 11.1963-42.346 5.6443-2.1879 70.4498 6.4752 115.8 12.9121-38.233-25.2316-92.5081-61.6783-95.2865-67.0612-6.256-12.1169 14.2748-33.3913 19.6768-39.1337 5.4006-5.7438 25.3794-27.5333 37.8584-22.0272z" /></svg>
</div>
<div class="cross"></div>
</div>
</div>
</div>
围栏的总高度约为 -> 360.56px。因此，从上到下一个透明区域与下一个透明区域之间的间隙 0.6%，将给出一条大约 2px 宽度的绿线。您可以将行数调整为 100% /(number of lines) 以设置透明区域宽度。
.fence {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: linear-gradient(to bottom, transparent 0%, transparent 12.5%, green,
transparent 13.1%, transparent 25.6%, green ,
transparent 26.2%, transparent 38.7%, green,
transparent 39.3%, transparent 51.8%,green,
transparent 52.4%, transparent 64.5%, green,
transparent 65.5%, transparent 78%, green,
transparent 78.6%, transparent 91.1%, green ,
transparent 91.7%, transparent 104.2%,green);
background-size: 100% 100%;
}
一条绿色水平线位于红色水平线后面的中央。
如果我想将绿色水平线保持在 2px 值，我该如何在代码中做到这一点？
https://jsfiddle.net/2d7mha0e/1/
如何在代码中完成？
这些是最初的 px 值。
background: linear-gradient(to bottom, transparent 0, transparent 72px, green 72px, green 74px, transparent 74px, transparent 108px, green 108px, green 110px, transparent 110px, transparent 144px, green 144px, green 146px, transparent 146px, transparent 180px, green 180px, green 182px, transparent 182px, transparent 216px, green 216px, green 218px, transparent 218px, transparent 252px, green 252px, green 254px, transparent 254px, transparent 288px, green 288px, green 290px, transparent 290px, transparent 360px);
background-size: 640px 360px;
这是一次尝试：
我将绿色更改为 px 值，但没有用。 https://jsfiddle.net/cr0zeumL/
background: linear-gradient(to bottom, transparent 0, transparent 20%, green 72px, green 74px, transparent 20.556%, transparent 30%, green 108px, green 110px, transparent 30.556%, transparent 40%, green 144px, green 146px, transparent 40.556%, transparent 50%, green 180px, green 182px, transparent 50.556%, transparent 60%, green 216px, green 218px, transparent 60.556%, transparent 70%, green 252px, green 254px, transparent 70.556%, transparent 80%, green 288px, green 290px, transparent 80.556%, transparent 100%);
background-size: 177.778% 100%;
}
这是我提供的代码片段，其中我试图将绿色水平线保持在 2px 值。
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
--color-a: blue;
--color-b: black;
--color-c: red;
--color-d: black;
background-size: 165px 165px;
background-image:
linear-gradient(var(--color-a) 5px, #0000 5px),
linear-gradient(90deg, var(--color-a) 5px, #0000 5px),
linear-gradient(var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
linear-gradient(90deg, var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
linear-gradient(var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
linear-gradient(90deg, var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
linear-gradient(var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
linear-gradient(90deg, var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
linear-gradient(var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),
linear-gradient(90deg, var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),
linear-gradient(var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),
linear-gradient(90deg, var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),
linear-gradient(var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),
linear-gradient(90deg, var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),
linear-gradient(var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),
linear-gradient(90deg, var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),
linear-gradient(var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),
linear-gradient(90deg, var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),
linear-gradient(var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),
linear-gradient(90deg, var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),
linear-gradient(var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),
linear-gradient(90deg, var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),
linear-gradient(var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),
linear-gradient(90deg, var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),
linear-gradient(var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),
linear-gradient(90deg, var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),
linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),
linear-gradient(90deg, var(--color-b)70px, #0000 70px 100px, var(--color-b) 100px),
linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
linear-gradient(90deg, var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
linear-gradient(90deg, var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
linear-gradient(var(--color-a), var(--color-a));
}
.outer {
display: flex;
min-height: 100vh;
align-content: center;
}
.ratio-keeper {
position: relative;
height: 0;
padding-top: 56.25%;
margin: auto;
overflow: hidden;
border: 1px solid #333;
}
.curtain {
flex: 1 0 0;
margin: auto;
max-width: 641px;
box-shadow: inset 0 -2px 0px 0px #0a0a0a;
border: 10px solid #000;
border-radius: 3.2px;
border-color: #000 #101010 #000 #101010;
background-image: linear-gradient(45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px),
linear-gradient(-45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px);
background-size: 10px 10px;
filter: drop-shadow(0 0 5px #000);
}
.fence {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: linear-gradient(to bottom, transparent 0, transparent 20%, green 20%, green 20.556%, transparent 20.556%, transparent 30%, green 30%, green 30.556%, transparent 30.556%, transparent 40%, green 40%, green 40.556%, transparent 40.556%, transparent 50%, green 50%, green 50.556%, transparent 50.556%, transparent 60%, green 60%, green 60.556%, transparent 60.556%, transparent 70%, green 70%, green 70.556%, transparent 70.556%, transparent 80%, green 80%, green 80.556%, transparent 80.556%, transparent 100%);
background-size: 177.778% 100%;
}
.fan svg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 70%;
height: 70%;
animation: fan-spin 8s linear;
}
@keyframes fan-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.cross::before,
.cross::after {
content: "";
background: red;
}
.cross::before
/*horizontal*/
{
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
/*width: 100%;*/
height: 2.8%;
/*height: 10px;*/
}
.cross::after
/*vertical*/
{
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
/*width: 10px;*/
width: 1.5%;
/*height: 100%;*/
}
<div class="outer">
<div class="curtain ">
<div class="ratio-keeper">
<div class="fence"></div>
<div class="fan">
<svg xmlns="http://www.w3.org/2000/svg" width="70%" height="70%" viewBox="76 130 381 381">
<path fill="#000100" stroke="#000" d="m166.3352 168.6294c5.5396 2.4448 45.2339 54.394 72.7499 91.0151-9.1901-44.8757-21.7959-109.0279-19.9558-114.796 4.1462-12.9949 33.7039-13.5172 41.5845-13.7579 7.8827-.2415 37.4165-1.5221 42.3488 11.1948 2.1872 5.6436-6.4773 70.4506-12.9142 115.8007 25.2309-38.2323 61.6818-92.5089 67.0612-95.2865 12.119-6.2568 33.3898 14.2749 39.1337 19.6768 5.7424 5.402 27.5341 25.3815 22.0294 37.859-2.4441 5.5389-54.3954 45.2354-91.0172 72.7506 44.8757-9.1901 109.0293-21.7959 114.7974-19.9559 12.9927 4.1442 13.5193 33.7032 13.7586 41.5838.2422 7.8819 1.5221 37.4165-11.192 42.3473-5.6471 2.1894-70.4541-6.4765-115.8049-12.9127 38.2323 25.2323 92.5081 61.6783 95.2871 67.0605 6.2581 12.1175-14.2742 33.3877-19.6776 39.133-5.4027 5.7432-25.3815 27.5341-37.8563 22.0279-5.5396-2.4434-45.2361-54.3961-72.7534-91.0143 9.1901 44.8757 21.7952 109.0287 19.9551 114.7953-4.1434 12.9934-33.7026 13.5157-41.5852 13.7586-7.8799.24-37.4165 1.5221-42.3431-11.1936-2.1887-5.6464 6.4779-70.4541 12.9133-115.8071-25.2323 38.2323-61.6824 92.5124-67.0639 95.2908-12.1169 6.256-33.3891-14.2728-39.1337-19.6754-5.7432-5.4027-27.5313-25.383-22.0251-37.8578 2.4434-5.5396 54.394-45.2339 91.0136-72.7526-44.8764 9.1908-109.0266 21.7944-114.7967 19.9566-12.9934-4.1434-13.5171-33.7025-13.7586-41.5852-.2407-7.8806-1.5221-37.4165 11.1963-42.346 5.6443-2.1879 70.4498 6.4752 115.8 12.9121-38.233-25.2316-92.5081-61.6783-95.2865-67.0612-6.256-12.1169 14.2748-33.3913 19.6768-39.1337 5.4006-5.7438 25.3794-27.5333 37.8584-22.0272z" /></svg>
</div>
<div class="cross"></div>
</div>
</div>
</div>
围栏的总高度约为 -> 360.56px。因此，从上到下一个透明区域与下一个透明区域之间的间隙 0.6%，将给出一条大约 2px 宽度的绿线。您可以将行数调整为 100% /(number of lines) 以设置透明区域宽度。
.fence {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: linear-gradient(to bottom, transparent 0%, transparent 12.5%, green,
transparent 13.1%, transparent 25.6%, green ,
transparent 26.2%, transparent 38.7%, green,
transparent 39.3%, transparent 51.8%,green,
transparent 52.4%, transparent 64.5%, green,
transparent 65.5%, transparent 78%, green,
transparent 78.6%, transparent 91.1%, green ,
transparent 91.7%, transparent 104.2%,green);
background-size: 100% 100%;
}
一条绿色水平线位于红色水平线后面的中央。