2016-06-22 7 views
0

ユーザーのブラウザの幅に応じて背景が拡大する場所を設定しようとしていますが、特定の要素の下にある外部スタイルシートに設定されている背景に結びついています。私は背景を変更することができます、私はその属性を変更することができますが、私はhtmlの背景に置き換えることはできません。CSSスタイルシート内に外部のJavaScriptをリンクすることはできますか?

私はこれに対する解決方法を研究してきましたが、そのほとんどはうまくいかないようです。私はさらに、画面の解像度を検出し、それに応じてbgファイルを選択する外部JSを(HTMLで)リンクしようとしましたが、ブラウザーはhtmlまたはちょうどリンクしてください。だから私はCSSのbg設定の下でそれをリンクする方法を探しています。私が読んだところでは、これは「可能性があるが危険である」、それがどのように行われたかについての実際の指示はない。

私はリスクにもかかわらずそれを試してみたいと思っていますが、私はまた別の提案にもオープンしています。私が必要とするのは、小さな電話機と他のすべてのものに対して、2つの異なる画像ファイル(同じ画像、異なる縮尺でのみ)を設定できることです。私はすでにsrcsetを見てきましたが、htmlに埋め込む必要があるので、私はそれに興奮していましたが、それは私には行きません。私は実際に画像を自分で編集しても構いません。

+0

私はタイトルを恐れているので、細部を読むことを敢えてしなかった、私は答えはノーだと思います。 – gevorg

+0

画面サイズに基づいて 'background-image'を置き換えようとしているなら、あなたが探しているものは[media queries]だと思います(http://stackoverflow.com/questions/21441938/media-queries-loading - 異なる画像 - 画面サイズに依存する)。 – neilsimp1

+0

ようこそStackOverflowへ。試したコードを追加してください。 – YakovL

答えて

1

メディアクエリーを探しているかのように聞こえます。メディアの機能に基づいて特定のCSSを設定できます。

メディアクエリに関する説明と例については、W3Schoolsを参照してください。

+0

これはまさに私が探していたものです。ありがとうございました。しかし、それはフォーマットを許可していないようです。クエリ以外の書式設定は無視され、クエリ内で追加すると全体が分割され、読み込み時にセクション全体がスキップされます。 [スクリーンショット](https://drive.google.com/open?id=0B2ulVSnB6jnFN0h5UkFPR082R1U) – saintace2213

2

私はあなたがCSSのbg設定のリンクjavascriptの意味を理解できません。

しかし、CSS内のメディアクエリを使用して異なる背景を設定できる必要があります。見てくださいhttps://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

+0

これはまさに私が探していたものです。ありがとうございます。しかし、それはフォーマットを許可していないようです。クエリ以外の書式設定は無視され、クエリ内で追加すると全体が分割され、読み込み時にセクション全体がスキップされます。 [スクリーンショット](https://drive.google.com/open?id=0B2ulVSnB6jnFN0h5UkFPR082R1U) – saintace2213

+0

書式設定をするときに、CSSの書式設定について話していますか?それはサポートされるべきです。このcodepenをチェックして、それがあなたがしようとしているものかどうかを教えてください:https://codepen.io/simiacode/pen/rLWZzz 気軽に編集して遊んでください。 – SpeedySan

+0

これは奇妙です。あなたのコードでは、おそらくあまりにも多くのパラメータがないため、問題なく動作します。鉱山では、500を下回るとすべての書式が失われる(テキストとロゴは独自のdivクラスを使用してフォーマットされています)ことがわかるまで、目立つ問題はありません。画像は「カバー」を取る代わりに、サイズ。実際には、フォーマットが破損するほど解像度が低くなる前に、タイル貼りを開始するように見えます。私はそれが画像の幅に依存すると思います。 – saintace2213

関連する問題