[英]Changing the center point of a radial gradient in CSS
I need to make multiple gradients like below: 我需要制作多个如下所示的渐变:
Now see how the center of the grey/white gradient differs, in some cases it come from the center, for some from the left-center, for some from the center-bottom. 现在,了解灰度/白色渐变的中心如何不同,在某些情况下,它来自中心,有些来自左中心,有些来自中底。
I used THIS , tool to generate the below gradient: 我使用THIS工具生成以下渐变:
background: #f9f9f9;
background: -moz-radial-gradient(center, ellipse cover, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%);
background: -webkit-radial-gradient(center, ellipse cover, #f9f9f9 0%,#e1e4e8 62%,#d1d6db 100%);
background: radial-gradient(ellipse at center, #f9f9f9 0%,#e1e4e8 62%,#d1d6db 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#d1d6db',GradientType=1 );
FIDDLE HERE , now is it possible to make gradients like how I have shown in the image above, or will I have to use images? 在这里找到 ,现在可以像上图所示那样进行渐变,还是我必须使用图像?
There are two parts to your question: 您的问题分为两部分:
radial-gradient
definition takes the position as a parameter and by setting the correct value, we can produce the required effect. radial-gradient
定义将位置作为参数 ,通过设置正确的值,我们可以产生所需的效果。 Below is a snippet with radial gradients having different positions for your reference. 以下是具有不同位置的径向渐变的代码段供您参考。
div { float: left; height: 200px; width: 200px; margin: 2px; background: #f9f9f9; } div:nth-of-type(1){ background: radial-gradient(ellipse at center, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%); } div:nth-of-type(2){ background: radial-gradient(ellipse at left bottom, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%); } div:nth-of-type(3){ background: radial-gradient(ellipse at left top, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%); } div:nth-of-type(4){ background: radial-gradient(ellipse at right bottom, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%); } div:nth-of-type(5){ background: radial-gradient(ellipse at right top, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%); } div:nth-of-type(6){ background: radial-gradient(ellipse at center top, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%); } div:nth-of-type(7){ background: radial-gradient(ellipse at 10% 20%, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%); } div:nth-of-type(8){ background: radial-gradient(ellipse at 75% 75%, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%); } div:nth-of-type(9){ background: radial-gradient(ellipse at 20% 80%, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%); }
<div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.