문제

나는 클래스와 ID를 사용하여 스타일을 가진 두 개의 div를 가지고 있습니다. 그는 자신의 배경에 대한 자리 표시 자이기 때문에 DIV 자체는 emtpy입니다. 예제 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 위치를 따르지 않는다는 사실을 제외하고는 작동합니다.
기본적으로 내 질문은 왜 DIV와의 Ranimg1 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