多个元素的CSS渐变

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

但是,由于图像可能不是解决这个问题的最佳方法,所以我希望在这里找到一个如何解决这个问题的答案CSS.我之前使用渐变,但我还没有找到解决这个问题的方法.

任何帮助表示赞赏.

编辑(06/01/15 13:30 GMT + 1):元素A和B应该能够有圆角.跨越渐变原本应该是a radial-gradient,但它不需要.也许这个问题真的无法解决.

(即使这个问题非常古老......)

看看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也是如此).

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