斜線背景にドロップシャドウをきれいに敷く方法

質問

以前どこかのサイトで見たのですが、
斜線の背景にドロップシャドウがきれいに重なっているサイトがありました。
/→斜線
[●●●●]→コンテンツ・ドロップシャドウ

//[●●●●]//
//[●●●●]//
//[●●●●]//
//[●●●●]//
//[●●●●]//

試しにコンテンツ部にドロップシャドウ＋斜線を含めたものをスライスし、
repeat-yでやってみましたが、やはり背景の斜線とズレがでて斜線が汚くなってしまいます。

これはどういう方法でやっているのでしょうか？
コンテンツ部をPNGで透過しているのかとも思って調べたのですが、いまいちやり方がわかりません。

わかる方いらっしゃいましたら、お願いいたします。
ちなみにphotoshopcs3です。

回答No.1

noname#66720

アルファpngを使わない場合(多くのブラウザに対応させたい時)は質問者さんのやられているようにすれば良いと思いますが、コンテンツ部分のwidthを固定幅にしないとズレてくるので難しいですね。
あとはbackground-positionでcenter　topを指定したほうが良いと思います。

アルファpngの場合はphotoshop上で背景を不可視にして新しいレイヤーに影をグラデーションツールなどでつくり、適宜サイズを変更してpngの24bitで保存してください。
そのまま背景画像にしてしまえばphotoshopのレイヤーのように不透明度を反映した表示になるはずです。