3

divどちらかの側に絶対配置されたオーバーレイをいくつか使用して、エッジでコンテンツをフェードアウトしようとしていdivます。ただし、フェードが終了したら、ページの背景を表示できるようにする必要がありますdiv.2つの他のコンテンツを線形の「フェード」グラデーションで効果的にマスクします。より良い説明については、下の図を参照してください...

ページ div ワイヤーフレーム

私は次のことを試しました：

  • -webkit-maskプロパティを線形グラデーションで使用します。これは Webkit で機能しますが、他には何もありません。また、線形グラデーションは、マスク プロパティと一緒に使用すると、途切れ途切れになり、スタカットになります。理想的ではありません。
  • SVG グラデーション マスクを使用します (例: Firefox / MDN デモ)。動作しますが、Firefox でのみです。ただし、Chromeの-webkit-mask/ほど勾配が悪いわけではありませんlinear-gradient
  • 透明なマスキング GIF または PNG を使用します。ただし、この例では、マスキングの色が透けて見えます (この SO の質問を参照してください)。

私が思いもよらなかった別の方法、またはおそらく同じ目的を達成するために使用できる別のレイアウトがあることを願っています。何かご意見は？

4

1 に答える 1

-1

透明なPNGが最善の策だと思います。より高いzインデックスで絶対にし、コンテナdiv内に作成します。このコンテナ div は、背景のスライド画像の上に浮かびますか? 非常に小さな 2 ピクセルのスライスを使用して、y 軸に沿って繰り返すだけですが、問題が正しく表示されない可能性があります。

下に繰り返した放射の非常に小さなスライス（y）で試してみたところ、下にある画像が上部の透明な画像をスクロールしました。あなたがやろうとしていることに従えば。chrome、firefox、safari で動作しました: これが css です

#container {
background-attachment: scroll;
background-image: url(Untitled-1.jpg);
background-repeat: repeat-x;
clear: both;
float: left;
height: 768px;
width: 80000px;
position: relative;
}
#container #info {
float: left;
width: 630px;
margin-right: 20%;
margin-left: 20%;
position: fixed;
margin-top: 100px;
height: 519px;
clear: both;
clip: rect(100px,auto,auto,auto);
 }
#container #info #l_side {
background-image: url(left_.png);
background-repeat: repeat-y;
float: left;
height: 519px;
width: 165px;
position: relative;
margin-right: -2px;
}
#container #info #content {
background-color: rgba(0, 0, 255, 0.56);
color: rgba(0, 0, 255, 0.56);
float: left;
height: 519px;
width: 300px;
position: relative;
}
#container #info #r_side {
background-image: url(Right.png);
background-repeat: repeat-y;
float: left;
height: 519px;
width: 165px;
position: relative;
margin-left: -1px;
}
于 2013-09-01T15:54:36.953 に答える