0

流動的なレイアウト/レスポンシブデザインの背景として単一の画像を使用して、偽のサイドバー列を作成しようとしています。

タイトルのコードは Chrome (他のブラウザーはまだテストされていません) で問題なく動作しますが、その理由がわかりません。W3Schoolsは、3 つの「パラメータ」の使用について文書化していません。（最初はドイツ語のサイトが参考になりましたが、この質問には英語の参考書が必要でした。それが最初に思いつきました。）

クロスブラウザーである限り、コードが機能しても問題ありません。Chrome のデザインに満足したら、ブラウザの互換性をテストするつもりでした。

ただし、次のようなものを採用しようとしたとき：

background-position: -200px right -200px;

さまざまなバリエーションを試しましたが、失敗しました。

質問:そもそもこのマークアップに関するドキュメントが見つかりませんでした... これはバグでしょうか、それとも有効な説明がありますか? それが有効である場合、誰かが私にこれを適切に行う方法を説明してもらえますか?

4

1 に答える 1

1

MDNによると、 background-position は位置の値を取り、最大 4 つの値を取ることができます。

background-position: top -200px right -200pxあなたの場合、要素の右上隅に位置（-200、-200）の背景画像であると同等である必要があります。

編集：コメントで@Dvirが述べたように、W3Cは実際の仕様でもあります。MDN の方がユーザーフレンドリーでありながら、正確で詳細であるため、私は MDN を好みます。

于 2013-10-14T21:58:24.637 に答える