自定义尺寸的线性渐变 [英] Linear gradient with custom size
问题描述
我有这个设计:
已经用html/css创建了,但是我需要删除1和5的多余行.这是通过添加绝对位置元素来创建灰线而实现的,但是容器点的大小是敏感的.
It's already created with html/css but I need to remove the extra linea for 1 and 5. This was achieved by adding a position absolute element to create the grey line but the size of the container's dot is responsive.
我的想法是为每个容器创建一个背景线性渐变,如下所示:
My idea was creating a background linear-gradient for each container like so:
所有人:
background: linear-gradient(to right, grey 100%, transparent 0);
第一个:
background: linear-gradient(to left, grey 50%, transparent 0);
最后一个:
background: linear-gradient(to right, grey 50%, transparent 0);
但是我不知道如何缩小尺寸:
but I don't know how to make it smaller:
推荐答案
假定所有项目的宽度相同,则渐变应从1的中点开始,到5的中点结束,这意味着它应从1的中点开始.10%标记并在90%标记处结束,例如 linear-gradient(向右,透明10%,灰色10%,灰色90%,透明90%)
.
Assuming that all items have equal widths, then the gradient should start at the midpoint of 1 and end at the midpoint of 5, which means it should start at the 10% mark and end at the 90% mark, something like linear-gradient(to right, transparent 10%, grey 10%, grey 90%, transparent 90%)
.
要限制背景大小,可以使用 background-size:100%[DESIRED_HEIGHT]
进行控制.假设您希望条形为16px粗,那么您可以使用 background-size:100%16px
.将其与 background-repeat:no-repeat
(背景重复:不重复)结合使用,以避免渐变重复出现,而将 background-position:center center(中心居中)
对其进行居中放置.
To restrict the size of the background, you can use background-size: 100% [DESIRED_HEIGHT]
to control it. Say you want the bar to be 16px thick, then you can use background-size: 100% 16px
. Combine that with background-repeat: no-repeat
to avoid the gradient from repeating, and background-position: center center
to center it.
请参见概念验证示例:
body {
font-family: Arial, sans-serif;
}
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: space-around;
background-image: linear-gradient(to right, transparent 10%, grey 10%, grey 90%, transparent 90%);
background-size: 100% 8px;
background-repeat: no-repeat;
background-position: center center;
}
ul.colors {
background-image: linear-gradient(
to right,
transparent 10%,
red 10%,
red 30%,
orange 30%,
orange 50%,
green 50%,
green 70%,
blue 70%,
blue 90%,
transparent 90%
);
}
ul li {
display: block;
width: 48px;
height: 48px;
border: 1px solid #999;
border-radius: 50%;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
<strong>Plain</strong>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<br /><br />
<strong>Colors</strong>
<ul class="colors">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
这篇关于自定义尺寸的线性渐变的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!