多個元素的CSS漸變

Question

我想知道是否可以將單個CSS3漸變背景應用於多個元素。 換句話說，漸變跨越父元素，但僅在子元素內可見。

搜索之后，我找到了這個帖子： 在多個視圖上應用漸變

這正是我的問題，雖然我需要它作為CSS/HTML代碼。

為了想象這個問題，我拍了兩張照片：

這是基本設置。 需要漸變背景的兩個<div>位於較大的<div>元素內。

如您所見，第二個圖像中的漸變完全從元素A漸變到元素B.在大多數圖像編輯程序中，這種效果很容易實現，因此我可以使用合適的圖像來獲得所需的效果。

但是，由於圖像可能不是解決此問題的最佳方法，因此我希望在此處找到關於如何僅使用CSS執行此操作的答案。 我之前使用漸變，但我還沒有找到解決這個問題的方法。

任何幫助表示贊賞。

編輯（06/01/15 13:30 GMT + 1）：元素A和B應該能夠有圓角。 跨度梯度最初被認為是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和-webkit-clip-path的CSS聲明來完成此操作。 這基本上使元素的一部分透明。 但是，您需要事先指定每個元素的大小，並稍微調整一下以使項目正確顯示。 此方法適用於非實體背景。 與流行的看法相反，CSS剪輯與跨瀏覽器的兼容性非常好。

優點：圖案背景，兼容

缺點：定義子元素大小，調整

Answer 3

background-attachment: fixed和iframe可能會為您做這個技巧。
查看nexts.github.io/Multiple.js並注意“ 工作原理 ”部分