質問

クラスとIDを使用してスタイルを設定するDivがいくつかあります。div自体は、背景のプレースホルダーに過ぎないため空です。例Div:

<div id='ranImg1' class='ranImg'></div>

次に、このcssを使用してスタイルを設定します:

.ranImg {
  position:fixed;
  z-index:0;
  width:250px;
  height:250px;
  display:block;
}
#ranImg1 {
  left:10px;
  top:200px;
  background-attachment:fixed;
  background-image:url(http://localhost/MyAlbum//images/background/ranPaperclips.png);
  background-repeat:no-repeat;
}

Divがドキュメントの左上にある限り、画像は正しく表示されますが、Divがページの別の場所に配置されると、ページの左上隅に画像が表示されたままになります。 divと重なります(この例では、画像の下部になります)。

編集 私は他のレイアウトに影響を与えずにこれらのDivを配置しようとしていますが、それらは他のレイアウトの背後にあります。これは、背景画像がdivの位置に従っていないという事実を除いて機能します。
だから基本的に私の質問は、なぜranImg1 divの背景がdivに配置されず、左上隅に留まるのか、そしてそれを修正する方法ですか?

役に立ちましたか?

解決

background-attachment:fixed は、ブラウザウィンドウに相対的な背景画像を添付します。 「フォロー」したい場合 div の位置、次の行を削除します。

#ranImg1{
  left:10px;
  top:200px;
  background-image:url(http://localhost/MyAlbum//images/background/ranPaperclips.png);
  background-repeat:no-repeat;
}

background-position 属性を設定して、含まれているdivを基準にして背景を設定することもできます。

background-position: 0px 0px;

それが background-attachment を削除するだけで役立つかどうかはわかりません(まだコーヒーが足りません!)

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top