问题标签 [css-gradients]

我在左边有一个 CSS 渐变，在左边有一个带有图像的滑块。我如何将两者结合起来，使右侧的图像具有如下图所示的形状？

更新

HTML

CSS

问题是当我在同一个 div 的右侧添加另一个背景图像时，线性渐变不起作用。

我应该用标签制作我的滑块img，还是可以用背景图像实现这个用例？背景：线性渐变（125deg，#e20613 25%，白色 25%）；}

我正在寻找与下图等效的css。我正在使用多个停靠点，但很难获得硬停靠solid 2px white边界。如果我添加它，它看起来像是渐变而不是硬边。任何帮助都会很棒，谢谢！

如何使这个响应？我希望渐变和文本随着屏幕大小的变化而调整大小并保持居中。现在，渐变会不时重复，字体保持不变。我希望第一部分是 100vh，第二部分（还没有标记）不应该有渐变。

https://codepen.io/Shalise/pen/QOwbZJ

我正在尝试从白色淡入背景图像而不淡化内容。

这就是我所拥有的：

我正在尝试使用 font-awesomefa-star-o图标创建一个条纹星，如下所示。我使用背景渐变来创建这种效果，但不是仅仅覆盖星形图标，而是覆盖图标周围的整个方形空间。字体真棒图标可能无法实现我想要实现的目标，因此也可以接受其他建议，但更喜欢带有图标的答案。

我试图在 svg 文本上放置一个线性渐变，但我不确定如何在文本类中指定填充颜色。在学习如何执行此操作时，我在网上找到了一个示例，因此我正在使用它，但是在我为文本指定填充颜色的地方（在下面定义的 sfp2 类中），我输入了 fill="url(#MyGradient)" x="10" y="10" width="100" height="100"/> 但文本不再显示在屏幕上。

我的问题是：我在 sfp2 类中做错了什么，当它是 svg 文本时我们可以使用线性渐变吗？

这就是我想要实现的目标：

浅蓝色线条只是标记。我想要一个从中心固定 px的角度（向左偏）。而且我还希望左边的深蓝色也成为渐变色。

我可以制作我需要的角度，但我坚持将其放置在距中心的固定点，并使较暗的部分成为另一个倾斜的渐变：

谢谢！

无法为我的渐变填充设置动画。这是我的 CSS 和 HTML：..

为什么动画不起作用？它应该在哪里无限旋转！Firefox显示Inspect Element动画正在运行，然后我也看不到动画！我试过必须使用的方法（百分比法），但没有奏效！

我在我正在构建的新站点上使用径向渐变，但是在桌面上的 Safari 中颜色呈现不同（更暗）。是否有更好的跨浏览器语法可供使用？

我尝试了不同的前缀，但这并没有解决问题。我正在使用的代码如下。

当前在 Chrome 和 Firefox 中看到的正确输出：https ://imgur.com/a/fMJCbZE

Safari 中的输出：https ://imgur.com/a/KwwiV1b

如您所见，它在 Safari 中要暗得多。

有人对如何解决这个问题有任何想法吗？

下图，有一条透明的对角线。效果如何。

我尝试使用以下 codepen - 两种颜色。

https://codepen.io/PositionRelativ/pen/Ichrg

但是如何获得多次？