CSS漸變多個元素

我想知道是否有可能將單個CSS3漸變背景應用於多個元素。換句話說，漸變橫跨父元素，但只在子元素內部可見。CSS漸變多個元素

搜索後，我發現這個線程：Applying gradient over multiple views

這正是我的問題，但我需要它作爲CSS/HTML代碼。

爲了形象化的問題，我做了兩個畫面：

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

正如你所看到的，第二圖像中的梯度perfecly從元素A變淡元素B. 這種影響在大多數圖像編輯程序容易可行的，所以我可以只使用一個合適的圖像以獲得所需的效果。

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

任何幫助表示讚賞。

編輯（06/01/15 13:30 GMT + 1）：元素A和B應該能夠有圓角。生成梯度最初應該是radial-gradient，但它不需要。也許這個問題真的不能解決。

來源

2015-01-06 curious

有多複雜孩子塑造你正在考慮？在上面的例子中，你可以假設它是通過使兩個孩子形狀和添加中間欄。 – xdhmoore

另一個想法：這將有點古怪，但你可能可以用js計算必要的漸變，並根據每個子元素的位置手動應用它們。特別是如果你正在考慮垂直或水平梯度。 – xdhmoore

如何將漸變設置爲背景並使用CSS剪貼蒙版來創建矩形？ – tsg

演示：完成此https://jsfiddle.net/andrewgu/gptbyejt/

的一種方法是，你總是可以用堅實的背景顏色假的吧。您可以在後臺顯示梯度div，以及您想要的任何內容div，用覆蓋div分隔，其顏色與背景相匹配。

優點：靈活，兼容

缺點：固體背景顏色只有

Method 1

另一種方法是使用一種叫做CSS clipping。您可以使用clip-path和-webkit-clip-path的CSS聲明來執行此操作。這基本上使元素的一部分透明。但是，您需要事先指定每個元素的大小，並稍微調整它以使項目正確顯示。此方法適用於非純色背景。與流行的看法相反，跨瀏覽器兼容性的CSS剪裁非常好。

優點：圖案背景，兼容

缺點：定義子元素的大小，調整的background-attachment: fixed和iframe

Method 2

來源

2015-01-06 04:37:51 andrewgu

不錯的主意！剪輯路徑的東西會在邊界半徑的元素上工作嗎？ – curious

我剛剛注意到這個剪輯示例在firefox中不工作。 Firefox是否不支持這個？ – curious

顯然，[clip-path]（http://caniuse.com/#feat=css-clip-path）只適用於Firefox 33+，即使只有通過url參數，而不是'polygon'。這意味着你需要上傳一個大小爲SVG的文件來定義剪輯區域。它在Internet Explorer和Opera Mini中完全不受支持。 – andrewgu

的組合可以爲你做這一招。
退房nexts.github.io/Multiple.js並注意「它是如何工作」部分

來源

2016-04-10 08:06:06 Denis

（即使這qestion是很很老......）

看一看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）。

如果應用它看起來像這樣：

來源

2016-07-26 06:33:30 Clijsters

CSS漸變多個元素

回答

相關問題