ウェブサイトでの奇妙な画像スワップエラー

Question

これはどういうわけではないのですか？

これは私が私のウェブサイトに追加しようとするイメージです。

background-image: 
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0.46), rgba(0,0,0, 0.88)), 
    url('https://picsum.photos/1600/1400/?image=630'); 

それはこのように見えた当初から：

background-image: 
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0.46), rgba(0,0,0,0.88)), 
    url('http://unsplash.it/1600/1400?random=9'); 

私もしていない場合それでも私は、このランダムな画像を得ますコードはどこですか？私はクロームにいるとき

（私の新しいコードを見つけることができない）要素を点検：あなたがaswell確認したい場合は

background-image: 
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0.46), rgba(0,0,0,0.88)), 
    url(http://unsplash.it/1600/1400?random=9); 

www.filipfahlstrom.seは、ウェブサイトです。

私はそれがtheme.cssであることを100％確信しています。ファイルを保存してドメ​​インにアップロードしました。

Answer 1

あなたは確かな答えを得るにはあまりにも曖昧です。あなたはどのファイルを背景画像と呼んでいますか？どのように動作していない、それは単にコードが表示されないか、コンソールにエラーが表示されていますか？

この問題の一般的なエラーは次のとおりです。

- そのファイルが表示されていない場合は、CSSファイルを正しく呼び出さない。追加

-Try！あなたのtheme.css

-hardリロードブラウザと明確なキャッシュとの競合を持っていることが、あなたのCSSに重要。

-私はコードを少し変更してサーバーに再アップロードすると、サーバーが変更を認識して、変更が反映されるまでに数時間かかることがあります。

- 余分なスタイルを追加する前に、イメージをレンダリングしてみてください。レンダリングしたら、それを外部にレンダリングしてから、CSSを追加します。

Answer 2

は、実際のバックグラウンドURLを見てみましょう：あなたはあなたのページをロードしているhttp://unsplash.it/1600/1400?random=9

たびに、その代わりに、再び同じURLにアクセスしてください...ページを更新していない（あなたにランダムなイメージを与えますそれはあなたがページのURLを提供していて、イメージのURLは提供していないからです）。ここで

は私が

1. は、画像をダウンロードrecommend--何適切な場所に---あなたのプロジェクトフォルダに、ローカルマシン上に
2. 置き、それを（それが法的な観点からダウンロード可能です提供）
3. CSSのbackground-imageをローカルイメージを指すように変更してください。

Answer 3

画像は正しく表示されています。あなたの側の問題は、古いtheme.cssがまだブラウザのキャッシュに残っている可能性が最も高いです。

theme.cssファイルはCache-Control:max-age=3600, publicヘッダで送信されます。その時点で、ブラウザーは、ファイルが変更されたかどうかをチェックする前に、次の3600秒間キャッシュからファイルを自由にロードできます。

Chromeでは、デベロッパーツールのNetworkタブにこれが表示されます。そこにはSizeの(from memory cache)がキャッシュから読み込まれます。

ウェブサイトの開発中に、開発者ツールのNetworkタブのDisable cacheチェックボックスをオンにすると、この問題を回避できます。

または強制リロードを行うにCMDシフトRを使用しています。