半透明の画像をスクロールして、その下の別の画像を表示させようとしています。スクロールするDIVの背景を透明にするにはどうすればよいですか？
これまでのところ、上の画像を上にスクロールし、下の固定画像を取得しましたが、下の固定画像を表示するために上の画像の透明部分を取得する方法はわかりません。
上部の画像が透明であることを確認し、上部のスライドの背景色を赤色に設定してテストしましたが、これはうまくいきますが透明に設定すると白く表示されます。 CSSで
私は無駄にこれらの両方を入れている：
background-color: transparent;
background-color: rgba(0, 0, 0, 0);
あなたは私が間違ってやっているものを私に教えてくれたり、私にこれを達成するための別の方法を与えることができますか？
ありがとうございました。
https://jsfiddle.net/3vw52ncb/2/
はjbutler483のフィドルの助けを借りて、私はあなたが欲しいものを作ってきました。イメージを透明にするにはopacity、白い背景を削除するにはposition: absolute;が必要でした。
：
#slide_1 {
background-image: url("http://i.imgur.com/TIaK19Z.png");
background-size: 120%;
background-color: rgb(0, 0, 0, 0.2);
position: absolute;/* To remove white background */
top: 0;
opacity:0.8;/* To make the top image transparent */
left: 0;margin-bottom:100vh;
}
あなたはあなたの必要性に応じて不透明度の値を変更することができます。
ありがとう！ 私の唯一の問題は、トップイメージが水平に少し動くことです。 'margin：auto 0'を追加するとこれが修正されますが、垂直スクロールも削除されます。 縦スクロールバーを中央に置いて隠す方法は分かりますか？ –
このようにしてくださいhttps://jsfiddle.net/LeoLion/3vw52ncb/13/ –
ありがとう、私はそれを試して、私の望む結果を得ることを試みます。 –
で、次にしたい場合は、「私はトップの画像が透明であることを確認してください作った」書きました。これはあなたができなかったことではありませんか？ –
白い背景のため、どこに白い背景を使用していますか？不透明度は機能しません。 –
フォアグラウンドスライドは、重ならないように高さが調整されるため、バックグラウンドスライドの上に表示されることはありません。あなたの透明性はうまくいきます。白い色がページの背景色であることだけです。あなたが望むようにあなたのピザではありません。このフィドルを見てくださいhttps://jsfiddle.net/3vw52ncb/6/あなたは理解します。 – PinkTurtle