本文介绍了CSS渐变-颜色过多的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我遇到了CSS线性渐变的问题。我希望以一定的百分比使颜色更清晰。但是,当我添加的数量超过一定数量时,它似乎开始模糊颜色:
I am running into an issue with css linear-gradients. I am looking to make clean color breaks at certain percentages. But it seems to start blurring the colors when I add more than a certain number:
这是css渐变的示例,其中颜色中断过多-并且模糊
This is the example of the css gradient with "too many" color breaks - and blurs where it should not:
div { height: 100px; background-color: red; background-image: linear-gradient(to right, #ffffff 25%, #042750 25% 28%, #ffffff 28% 29%, #03aeef 29% 31%, #ffffff 31% 32%, #042750 32% 90%, #ffffff 90% 91%, #03aeef 91% 93%, #ffffff 93% 94%, #ffd900 94% 96%, #ffffff 96% 97%, #042750 97% 100%); }
<div></div>
这是一个示例,它具有足够的颜色中断,因此不会模糊:
This is an example of it with it enough color breaks so it doesn't blur:
div { height: 100px; background-color: red; background-image: linear-gradient(to right, #ffffff 25%, #042750 25% 28%, #ffffff 28% 29%, #03aeef 29% 31%, #ffffff 31% 32%, #042750 32% 90%, #ffffff 90% 91%, #03aeef 91% 100%) }
<div></div>
推荐答案
在这种情况下,最好使用多个渐变:
In such case it's better to use multiple gradient:
div { height: 100px; background: /* Color position /width height */ linear-gradient(#03aeef,#03aeef) 50% 0 / 5% 100%, /* top layer */ linear-gradient(#fff,#fff) 50% 0 / 10% 100%, linear-gradient(#03aeef,#03aeef) 87% 0 / 5% 100%, linear-gradient(#ffd900 ,#ffd900) 94% 0 / 5% 100%, linear-gradient(#fff,#fff) 95% 0 / 15% 100%, linear-gradient(#042750,#042750) right / 60% 100%; /* bottom layer */ background-repeat:no-repeat; }
<div></div>
更多推荐
CSS渐变
发布评论