複数の要素にわたるCSSのグラデーション

Question

複数の要素に単一のCSS3グラデーションの背景を適用できるかどうかは疑問でした。言い換えれば、勾配は親要素に及ぶが、子要素の内部でしか見ることができない。

検索した後、私はこのスレッドを見つけました：私はCSS/HTMLコードとしてそれを必要とするもののApplying gradient over multiple views

これは、まさに私の問題です。

これは、基本的な設定です：

が問題を可視化するために、私は2枚の絵を作りました。勾配の背景を必要とする2つの <div>は、より大きな <div>要素の内側にあります。

あなたが見ることができるように、第二の画像の勾配はperfeclyこの効果は、ほとんどの画像編集プログラムでは簡単になんとかですので、私はちょうど適切な画像を使用することができ要素B. に要素Aからフェード所望の効果を得る。

しかし、イメージはおそらくこれを解決する最良の方法ではないので、ここではCSSでこれを行う方法についての回答を探していきたいと思います。以前はグラデーションを使用していましたが、私自身はまだこの問題の解決策を見つけていません。

何か助けていただければ幸いです。

EDIT（06/01/15 13:30 GMT + 1）： 要素AとBは丸い角を持つことができます。 スパニングのグラディエントはもともとはradial-gradientとされていましたが、そうである必要はありません。 問題は本当に解決できないかもしれません。

Answer 1

デモ：これを達成するhttps://jsfiddle.net/andrewgu/gptbyejt/

一つの方法は、あなたがソリッド背景色と、それは常に偽物かもしれないということです。グラデーションdivをバックグラウンドに表示し、任意のコンテンツdivを背景と一致するオーバーレイのdivで区切って表示します。

長所：柔軟な、互換性の

短所：ソリッド背景色のみ

---

他の方法は、CSS clippingと呼ばれるものを使用することです。これは、CSS宣言clip-pathと-webkit-clip-pathを使用して行うことができます。これは、基本的に要素の一部を透明にします。しかし、あらかじめ各要素のサイズを指定しておく必要があります。このメソッドは、非実体の背景で機能します。普遍的な信念とは対照的に、CSSのクリッピングはブラウザ間の互換性があるとかなり良いです。

長所：パターン化された背景、互換性の

短所：定義された子要素のサイズ、あなたのためにこのトリックを行うことができますbackground-attachment: fixedとiframeの

Answer 2

コンビネーションを微調整。
nexts.github.io/Multiple.jsをチェックし、セクション

Answer 3

を「それはに仕組み」に注意を払う（この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も）で機能します。

適用した場合には、はのように、このように見える：子供はあなたが検討している形状されている