バックグラウンドイメージがロードされている間にカラーグラデーションをロードしようとしていますが、イメージがロードされていても表示しています。画像が読み込まれても色のグラデーションが表示されないように、私はどのようにCSSを書くことができますか？インターネット接続が遅いために背景イメージが読み込まれているときにカラーグラデーションを読み込む方法は？
background: url("../images/contactBg.jpg"), linear-gradient(rgba(3, 34, 47, 0.8), #01010e);
あなたが別のHTMLマークアップを追加する気にしない場合は、背景グラデーションを持つdivの内側に背景画像にdiv要素をラップすることができます： 私が試してみましたサンプルコードを見てください。
画像の読み込みはPNGですので、読み込んだ画像の色のグラデーションは表示されず、画像の後ろにグラデーションが残るようにしてください。 –
@AkashJain私は、CSSだけではできないと思います。おそらく、jquery '.load（）'を使ってイメージをロードし、要求が完了したときにdivのクラスを置き換えてみてください。 –
私はCSSでこれを行う方法は考えていません（少なくとも知っている）。
回避策はJQuery load function（試験せず）を使用することである。
$('#mydiv').load('../images/contactBg.jpg', function() {
//image has loaded, remove the background and add the image
$('#mydiv').css("background", "none");
$('#mydiv').css('background-image', 'url(../images/contactBg.jpg)');
});
そのように、background: linear-gradient(rgba(3, 34, 47, 0.8)に#mydivのCSSを設定して、イメージがロードされるとき、これは、勾配を削除し、それを置換します画像と一緒に。
は機能しませんでした。 –
@Mazino S Ukah - これはうまくいきます。働いているのを見てください：https://jsfiddle.net/k77dsyc2/1/ 参考までに、私がコードをテストしなかったということは、これが問題を解決するためのガイドラインであったことを意味しています。溶液。 –
大丈夫、ありがとう –
あなたのアプローチはほとんどのブラウザ（IE9 +）で動作するはずですか？ – tsh