问题标签 [css-gradients]

晚上好，

我目前正在尝试在我正在开发的新网站上设计对角柱效果，但在尝试正确放置背景时遇到了麻烦。

我正在努力实现的图像。

理想情况下，我想根据滚动事件和/或一些动画来更改颜色，这就是为什么我试图用 CSS 来实现这种效果，而不是使用模拟图像作为背景。该网站将需要做出响应，这消除了一些硬编码的可能性。

这是一个 CodeSandBox，其中包含我在尝试解决此问题时所做的尝试。不幸的是，transform-origin 属性似乎没有按预期工作。

编辑：从 Sandbox 在此处添加代码以供将来参考。

EDIT2：添加第二个示例图像以显示相反的渐变。Bryce Howitson 的回答的评论中提到了这一点。

谢谢阅读！

我正在使用一个名为Intuiface的程序创建一个交互式触摸屏显示器，并创建了一些背景图块/正方形，我想通过在颜色之间缓慢转换来使它们看起来“生动”。

我在 CSS 中使用了线性渐变过渡来做到这一点，但问题是过渡看起来不连贯。该程序正在运行 12 个可见图块（它是一个非常大的触摸屏）。

我尝试过使用更少的颜色并在更强大的 GPU 上运行（我认为它无论如何都是 CPU 运行的），但这并没有帮助。

目前动画明显断断续续。我希望过渡更加顺利。有谁知道我怎么能做到这一点？

这是代码片段。

如何在考虑项目数量的同时将渐变类添加到此 flex 容器内的多个项目中？目前它只能通过向一组特定的“单元”添加一个类并产生单独的渐变来工作。

我想要一个渐变来覆盖两个或更多项目，同时保持所有项目的弹性和相等。

我正在尝试使用 CSS 生成下面的渐变图像。但是，我正在努力调整对齐方式。你会在我的片段中注意到这个问题。我尝试过绝对定位它们，但这只会让事情变得更糟。

我想做这样的锁链邮件：

我试过使用线性渐变，但它似乎不起作用

我希望输出类似于 imgur 显示的图像。线性梯度会起作用吗？

Chromium 版本 75.0.3770.100（官方构建）Arch Linux（64 位）。
在 Brave 的 Android 上也观察到（同样基于 Chromium 75）。

我正在制作一个充满白色渐变的旋转正方形：

这在 Firefox 上运行良好。但是，在 Chrome 上，我最初看到的是黑色方块而不是白色方块。就好像 Chrome 忘记渲染元素的图层一样。此外，旋转轴稍微偏离中心。当我右键单击方块并选择“检查”时，它突然意识到自己的方式错误并变成白色。

看起来我遇到了问题 966019，它出现在 Chrome 75 或 74 中，并且已被确认和分配，但尚未修复。

值得注意：

• Abackground-color 除了使background-image正方形变成那种颜色而不是黑色。
• 如果我在 div 中放置一些文本，我会得到一个不可见的正方形而不是黑色的。

解决方法：

• 它不会发生在backface-visibility: visible. 但我需要隐藏它，因为在我的实际情况下，正方形有两个不同颜色的边，由两个异相 180 度的旋转正方形创建。
• background-color 普通而不是渐变不会发生这种情况。但是需要渐变以适应其余样式。
• 0deg如果我从 开始旋转并通过，则不会发生这种情况360deg。但随后它将与“前”面同时开始。

由于所有这些都有不良的副作用，我正在寻找更好的解决方法。

所以我正在研究这个用户界面，我决定尝试让它从主肖像圈中弹出，我唯一的问题是我无法让这个径向渐变变得平滑。

整个问题来自我想要在左侧有一个倒置的边界半径，以便它在静止时与肖像圈相匹配。我看到了几种不同的方法来做到这一点，但我相当业余，并认为这种径向渐变似乎是最简单的方法。然而，现在我只剩下这个可怕的锯齿状边缘挖出的一面。

我已经查看了不同的渐变样式而不是使用圆形，并且尝试将头绕在“Andreas Larsen”的“缓和线性渐变”帖子上，但无济于事。

这是一个 JSFiddle，只有显示 UI 的必要代码，如果有人能提供帮助，它对我来说比你知道的更有价值:) https://jsfiddle.net/Infamoose/thj9305f/1/

编辑：忽略所有不稳定的条和图标，我正在修复：P 我只是想先在径向渐变部分设置麦克风图标。

我用上面的“句柄”设计了一个“日历”div。

这是通过设置 2 div 3*3 px 和黑色背景创建的，并将它们放置在绝对位置，正好在相对位置的父 div 内日历 div 的顶部上方。

此日历位于图像上方的绝对位置。

这可行，但感觉非常“硬编码”，因为日历 div 中的每次更改都会破坏显示，因为“句柄”会在同一个位置，而日历顶部边框可以移动。

如何在日历 div 本身的顶部获得相同的“句柄”样式，以便日历 CSS 高度的更改不会影响“句柄”？

以下 base.html 代码未从同一文件夹中的 css 文件实现渐变背景。

base.html：

样式.css：

}

我正在尝试使用 HTML 和 CSS 创建看起来像手机的东西，并且我希望相机具有类似于“倒置边框半径”的东西，可以将其与框架平滑连接。

我不能只是让它变大并用带有白色背景的伪元素掩盖不需要的区域，因为屏幕内容可能并不总是白色的。

另外，我不能mask-image在同一个元素上使用，因为“倒置边框半径”实际上会延伸到它的边界框之外，所以我实际上会增加更多的区域而不是减去（加上支持真的很低）。

如果可能，我想避免使用 SVG。