调整中心径向渐变的半径 [英] Resize the radius of a centred radial gradient
问题描述
我正在重新设置我目前的项目，并发现一个简单的方法，通过使用以下来褪色的div背景的左右边缘。我一直在试验尝试编辑中心圆的半径，使其更小。我似乎不能改变它，没有整个渐变样式消失。
我试图将黄色区域设置为文本的背景，渐变渐变渐变为透明。我需要做什么才能获得更透明，色彩更浅的圈子？
background-image：radial-gradient（center center，circle cover，＃ffeda3，transparent）;
background-image：-o-radial-gradient（center center，circle cover，＃ffeda3，transparent）;
background-image：-ms-radial-gradient（center center，circle cover，＃ffeda3，transparent）;
background-image：-moz-radial-gradient（center center，circle cover，＃ffeda3，transparent）;
background-image：-webkit-radial-gradient（center center，circle cover，＃ffeda3，transparent）;
调整径向渐变半径的方法是通过指定颜色停止百分比。也就是说，我们需要指定一种颜色必须结束，而另一种颜色必须开始。
在您提到的渐变中，没有颜色停止百分比因此从元素的中心绘制的每个圆具有从＃ffeda3 进展到透明的颜色。
background-image：radial-gradient（center center，circle cover，＃ffeda3，transparent）;
可能的解决方案
现在取决于你想要的实际渐变的外观，你可以使用我在下面的代码片段提供的三个方法：
div.hard-stop {text-align：center; background-image：-moz-radial-gradient（center center，circle cover，＃ffeda3 30％，transparent 30％）; background-image：-webkit-radial-gradient（center center，circle cover，＃ffeda3 30％，transparent 30％）; background-image：radial-gradient（center center，circle cover，＃ffeda3 30％，transparent 30％）;} div.gradual-1 {text-align：center; background-image：-moz-radial-gradient（center center，circle cover，＃ffeda3，transparent 30％）; background-image：-webkit-radial-gradient（center center，circle cover，＃ffeda3，transparent 30％）; background-image：radial-gradient（center center，circle cover，＃ffeda3，transparent 30％）;} div.gradual-2 {text-align：center; background-image：-moz-radial-gradient（center center，circle cover，#ffeda3 30％，transparent 35％）; background-image：-webkit-radial-gradient（center center，circle cover，＃ffeda3 30％，transparent 35％）;背景图像：径向渐变（中心中心，圆覆盖，＃ffeda3 30％，透明35％）;} / *只是为演示* / body {background：black;} div {margin-bottom：20px;}
< script src =https：//cdnjs.cloudflare。 com / ajax / libs / prefixfree / 1.0.7 / prefixfree.min.js>< / script>< div class =hard-stop> < a href =＃>测试< / a> < a href =＃>测试2< / a> < a href =＃>测试3< / a>< / div>< div class =gradual-1> < a href =＃>测试< / a> < a href =＃>测试2< / a> < a href =＃>测试3< / a>< / div>< div class =gradual-2> < a href =＃>测试< / a> < a href =＃>测试2< / a> < a href =＃>测试3< / a>< / div>
b
说明
上述代码段中使用了三种不同的渐变，
background-image：radial-gradient（center center，circle cover，＃ffeda3 30％，transparent 30％）;
这是一个硬停止渐变。也就是说，直到父元素的所有1px圆圈的30％是颜色＃ffeda3 ，所有1px圆圈之后是透明的。
渐变 - 1：
background-image：radial-gradient（center center，circle cover，＃ffeda3，transparent 30％）;
这是一个渐进的过程，直到达到透明度。第一个1px圆圈具有颜色＃ffeda3 和每个1px圆圈的颜色，确定后在30％标记颜色变为透明。 30％后，渐变颜色仍然保持透明。
渐变 - 2：
background-image：radial-gradient（center center，circle cover，＃ffeda3 30％，transparent 35％）;
此渐变的颜色为＃ffeda3 第一个1px圆圈直到容器的30％。从30％标记到35％标记，每个1px圆的颜色从＃ffeda3 逐渐变为透明。从35％开始，每个1px圆形的颜色仍保持透明。
I'm restyling my current project and found a simple way to fade the left and right edges of my div background by using the following. I've been experimenting trying to edit the radius of the centered circle, to make it smaller. I can't seem to alter it, without the whole gradient style disappearing.
I'm trying to set the yellow area as the background of the text with less gradual fade to transparent. What do I need to do to get more transparent and less colored circle?
background-image: radial-gradient(center center, circle cover, #ffeda3, transparent);
background-image: -o-radial-gradient(center center, circle cover, #ffeda3, transparent);
background-image: -ms-radial-gradient(center center, circle cover, #ffeda3, transparent);
background-image: -moz-radial-gradient(center center, circle cover, #ffeda3, transparent);
background-image: -webkit-radial-gradient(center center, circle cover, #ffeda3, transparent);
The way to resize the radius of a radial gradient is by specifying the color stop percentages. That is, we need to specify where one color has to end and the other color has to start.
In the gradient that you have mentioned in question, no color stop percentage is mentioned and hence each circle that is drawn from the center of the element has a color that progresses from #ffeda3 to transparent.
background-image: radial-gradient(center center, circle cover, #ffeda3, transparent);
Possible Solutions
Now depending on how you want the actual gradient to look like you can use any of the three methods that I have provided in the below snippet:
div.hard-stop {
text-align: center;
background-image: -moz-radial-gradient(center center, circle cover, #ffeda3 30%, transparent 30%);
background-image: -webkit-radial-gradient(center center, circle cover, #ffeda3 30%, transparent 30%);
background-image: radial-gradient(center center, circle cover, #ffeda3 30%, transparent 30%);
}
div.gradual-1 {
text-align: center;
background-image: -moz-radial-gradient(center center, circle cover, #ffeda3, transparent 30%);
background-image: -webkit-radial-gradient(center center, circle cover, #ffeda3, transparent 30%);
background-image: radial-gradient(center center, circle cover, #ffeda3, transparent 30%);
}
div.gradual-2 {
text-align: center;
background-image: -moz-radial-gradient(center center, circle cover, #ffeda3 30%, transparent 35%);
background-image: -webkit-radial-gradient(center center, circle cover, #ffeda3 30%, transparent 35%);
background-image: radial-gradient(center center, circle cover, #ffeda3 30%, transparent 35%);
}
/* Just for demo */
body {
background: black;
}
div{
margin-bottom: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="hard-stop">
<a href="#">Test</a>
<a href="#">Test 2</a>
<a href="#">Test 3</a>
</div>
<div class="gradual-1">
<a href="#">Test</a>
<a href="#">Test 2</a>
<a href="#">Test 3</a>
</div>
<div class="gradual-2">
<a href="#">Test</a>
<a href="#">Test 2</a>
<a href="#">Test 3</a>
</div>
Explanation
There are three different gradients used in the above snippet and below is an explanation of each of them:
Hard-stop Gradient:
background-image: radial-gradient(center center, circle cover, #ffeda3 30%, transparent 30%);
This is a hard-stop gradient. That is, till 30% of the parent element all 1px circles are of color #ffeda3 and all 1px circles after that are transparent. As you can see there is a hard switch over of colors at 30% mark.
Gradual - 1:
background-image: radial-gradient(center center, circle cover, #ffeda3, transparent 30%);
This has a gradual movement till it reaches transparency. The first 1px circle has color #ffeda3 and the color of each 1px circle after it is determined such that at 30% mark color becomes transparent. After 30% the color of the gradient remains as transparent.
Gradual - 2:
background-image: radial-gradient(center center, circle cover, #ffeda3 30%, transparent 35%);
This gradient has color as #ffeda3 from the first 1px circle till 30% of the container. From 30% mark to the 35% mark, color of each 1px circle changes progressively from #ffeda3 to transparent. From 35%, the color of each 1px circle remains as transparent.
这篇关于调整中心径向渐变的半径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
