html - 多个元素的 CSS 渐变

Question

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

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

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

为了形象化这个问题，我做了两张图:

这是基本设置。两个<div>需要渐变背景的元素在更大的 <div> 中元素。

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

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

感谢任何帮助。

编辑(06/01/15 13:30 GMT+1):元素 A 和 B 应该可以有圆 Angular 。跨越梯度原本应该是 radial-gradient ，但它不需要是。也许这个问题真的无解。

Answer 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 expands background to viewport's size and displays in every element appropriate chunk, exactly what is needed!

这背后的想法既简单又聪明，适用于大多数现代浏览器(也适用于 IE8)。

如果应用它看起来像是这样的: