CSS3径向渐变
迈克尔·鲁德纳·埃文奇克
我需要知道这是否有可能。“创意” photoshop部门想出了这张图片，而在此之前，它只是从1到5种颜色渐变的效果。他们仍然会这样做，但是现在他们在其顶部有一个白色圆圈。我什至会去实现这一目标。示例语法没有确切的位置。在白色圆圈上方，我需要在“白色”中添加特定的字体和文本
提前谢谢了。
保利
将多个叠加渐变作为背景可能更简单。
第一个是简单的线性渐变，从左到右，第二个径向渐变是在顶部。
然后，只需将文本元素（绝对）定位在白色圆圈上即可（请记住，您知道它的位置）
一个快速而肮脏的演示：
div {
height: 350px;
width: 90%;
margin: 1em auto;
border: 1px solid lightgrey;
background:
radial-gradient(circle closest-side at 75% 50%, white, white 60%, transparent),
linear-gradient(to right, #344862, white 75%, yellow);
position: relative;
}
span {
position: absolute;
left: 75%;
top: 50%;
transform: translate(-50%, -50%);
}<div>
<span>Lorem ipsum dolor.</span>
</div>注意：径向梯度中心的定位与径向梯度中心的定位是一样的<span>。在transform刚刚确保文本在圆圈中央。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
CSS3径向渐变语法说明
- 2
CSS3径向渐变显示为线
- 3
动画径向渐变CSS3：从左移到右？
- 4
为径向渐变动画CSS3：从左移到右？
- 5
css3径向渐变中颜色停止百分比的含义是什么
- 6
CSS径向渐变？
- 7
线性渐变CSS3
- 8
CSS3线性渐变
- 9
CSS径向渐变，新语法
- 10
css3渐变的朝阳效果
- 11
CSS3中的块状渐变效果
- 12
悬停时CSS3渐变闪烁
- 13
CSS3线性渐变带
- 14
CSS3线性渐变纯色大小
- 15
CSS径向渐变阴影-已反转
- 16
Flutter-实现CSS径向渐变
- 17
平滑的 css 径向渐变切口
- 18
CSS3背景：重复线性渐变
- 19
具有渐变边框的CSS3圆？
- 20
如何结合两个css3渐变？
- 21
具有渐变+背景图像的CSS3动画
- 22
CSS3渐变背景无法正常工作
- 23
如何制作矩形透明渐变CSS3？
- 24
CSS3 滑动渐变动画——它是如何工作的
- 25
带有可单击项的CSS3圈jQuery（径向菜单）
- 26
径向渐变CSS原点位于顶部，而不位于中心
- 27
在CSS中更改径向渐变的中心点
- 28
使用CSS径向渐变创建自定义形状
- 29
CSS动画在径向渐变背景下不平滑
我来说两句