多个元素的CSS渐变

Question

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

搜索之后,我找到了这个帖子:在多个视图上应用渐变

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

为了想象这个问题,我拍了两张照片:

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

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

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

任何帮助表示赞赏.

编辑(06/01/15 13:30 GMT + 1):元素A和B应该能够有圆角.跨越渐变原本应该是a 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 将背景扩展为视口的大小,并在每个元素中显示适当的块,正是所需要的!

这背后的想法很简单,因为它很聪明,适用于大多数现代浏览器(IE8也是如此).

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

Answer 2

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

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

优点：灵活、兼容

缺点：仅纯色背景

另一种方法是使用CSS 裁剪。clip-path您可以使用和的 CSS 声明来完成此操作-webkit-clip-path。这基本上使元素的一部分变得透明。但是，您需要事先指定每个元素的大小，并稍微调整它以使项目正确显示。此方法适用于非纯色背景。与普遍的看法相反，CSS 裁剪具有很好的跨浏览器兼容性。

优点：图案背景，兼容

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