多个元素上的 CSS 渐变答案

【问题标题】：CSS gradient over multiple elements多个元素上的 CSS 渐变
【发布时间】：2015-01-06 02:11:53
【问题描述】：

我想知道是否可以将单个 CSS3 渐变背景应用于多个元素。换句话说，渐变跨越父元素，但只在子元素内可见。

经过搜索，我找到了这个帖子：Applying gradient over multiple views

这正是我的问题，虽然我需要它作为CSS/HTML 代码。

为了形象化问题，我做了两张图：

这是基本设置。需要渐变背景的两个<div>s 位于较大的<div> 元素内。

如您所见，第二张图像中的渐变完美地从元素 A 渐变到元素 B。这种效果在大多数图像编辑程序中都很容易实现，因此我可以使用适当的图像来获得所需的效果。

但是，由于图像可能不是解决此问题的最佳方法，我希望在这里找到有关如何仅使用 CSS 来解决此问题的答案。我以前使用过渐变，但我自己还没有找到解决这个问题的方法。

感谢任何帮助。

编辑（06/01/15 13:30 GMT+1）：元素 A 和 B 应该能够具有圆角。跨越梯度原本应该是radial-gradient，但它不是必须的。可能问题真的没办法解决。

【问题讨论】：

您正在考虑的子图形有多复杂？在上面的示例中，您可以通过将两个子形状设为一个并添加中间条来伪造它。
另一个想法：这会有点古怪，但您可能可以使用 js 计算必要的渐变并根据每个子元素的位置手动应用它们。特别是如果您正在考虑垂直或水平渐变。
如何将渐变设置为背景并使用 CSS 剪贴蒙版创建矩形？
这可能会有所帮助：sarasoueidan.com/blog/css-svg-clipping
找到了这个：http://www.html5rocks.com/en/tutorials/masking/adobe/?redirect_from_locale=de 还在寻找，虽然

标签： html css gradient

【解决方案1】：

（即使这个问题已经很老了……）

看看Multiple.js - 它描述了如何将渐变应用到多个元素没有js。

引自演示页面：

.selector {
  background-image: linear-gradient(white, black);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;  /* <- here it is */
  width: 100px;
  height: 100px;
}

background-attachment: fixed 将背景扩展到视口的大小，并在每个元素中显示适当的块，正是需要的！

这背后的想法既简单又智能，适用于大多数现代浏览器（IE8 也一样）。

如果应用它看起来像这样：

【讨论】：

我什至不知道背景附件！太好了。

【解决方案2】：

演示： https://jsfiddle.net/andrewgu/gptbyejt/

实现这一点的一种方法是，您始终可以使用纯色背景色来伪造它。您在背景中显示渐变 div 以及您想要的任何内容 divs，并用颜色与背景匹配的覆盖 div 分隔。

优点：灵活、兼容

缺点：只有纯色背景

另一种方法是使用名为CSS clipping 的东西。您可以使用clip-path 和-webkit-clip-path 的CSS 声明来做到这一点。这基本上使元素的一部分透明。但是，您需要事先指定每个元素的大小，并稍微调整一下以使项目正确显示。此方法适用于非纯色背景。与流行的看法相反，CSS 剪辑具有很好的跨浏览器兼容性。

优点：图案背景，兼容

缺点：定义子元素大小，调整

【讨论】：

好主意！剪辑路径的东西是否适用于具有边界半径的元素？
我刚刚注意到剪辑示例在 Firefox 中不起作用。 Firefox 根本不支持这个吗？
显然，clip-path 仅适用于 Firefox 33+，即使这样也只能通过 url 参数，而不是 polygon。这意味着您需要上传一个大小合适的 SVG 文件来定义剪辑区域。它在 Internet Explorer 和 Opera Mini 中仍然完全不受支持。
@curious，CSS 剪辑将对带有border-radius 的元素起作用，前提是您重新定义剪辑区域以匹配元素的。

【解决方案3】：

background-attachment: fixed 和 iframe 的组合可能会为您解决这个问题。
查看nexts.github.io/Multiple.js 并关注“工作原理”部分

【讨论】：