Webサイトの可変長コンテンツセクションに複雑な影の背景を作成しようとしています。私はこれを機能させるために知っているすべてのトリックを試しましたが、これを正しく機能させる方法を理解できません。ここのCSS忍者が助けてくれることを願っています。
ここで私が達成しようとしていることの例を見ることができます:http://mpgnet.com/example.jpg
ご覧のとおり、上下の影は簡単です。右側と左側の影がトラブルメーカーです。上部と下部の150pxは、中央のコンテンツが垂直方向に大きくなるにつれて拡張する必要がある中央部分とは異なります。
ここで非常に注意が必要です。背景が塗りつぶされていないため(この例の画像では影を強調表示しているため)、これらの影は透明な背景を持っている必要があります。また、長さが可変であるため、エンドキャップがどこにあるかわかりません。背景パターンに落ちる。このため、影を繰り返して全体を作り、その上を上下のピースで覆うことはできません。
これを達成する方法についての提案/アイデア/インスピレーションをいただければ幸いです。CSS3の使用は問題ありません。