div를 다른 배경의 배경으로 추가하는 방법은 무엇입니까?

Question

제 목표는 div의 배경 이미지를 동적으로 생성하는 것입니다.

나는 기능이있어 :

• 가 캔버스에 이미지를 그립니다을;
• 이미지의 데이터 URL을 가져옵니다.
• 이미지를 배경으로 사용하여 bgDiv을 만듭니다.
• 주어진 div 요소 앞에 bgDiv 앞에 붙습니다.

  var bgDiv = document.createElement('div'); 
  $(bgDiv).css({ 
      position: 'absolute', 
      left: '0px', 
      top: '0px', 
      width: '100%', 
      height: '100%', 
      background: 'url(' + url + ')', 
  }); 
  $(div).prepend(bgDiv); 
  

  문제는 다음과 같습니다 다음 bgDiv은 div의 아이들의 앞에 그려

다음은 3, 4 점의 코드입니다. 나는 이것이 position: absolute 속성 때문에 bgDiv에 설정되어있는 반면 내 아이들은 보통 아이들이 position으로 설정되어 있기 때문입니다.

bgDiv 요소는 무엇이든지간에 모든 어린이의 아래쪽에 그려 질 수 있습니까?

 

---

면책 조항 : 난 그냥 div의 background-image 속성을 설정할 수 있다는 것을 알고 있지만, 내 목적을 위해 충분하지 않습니다.

 

---

나는 최근 파이어 폭스에서 이것을 테스트하고있어, 나는 아주 보편적 인 솔루션이 필요합니다.

Answer 1

편집 : 선택자로 실제로 $(div)을 사용하는 경우 문제가 하나 있습니다. 콘텐츠 <div>의 ID 또는 클래스를 대신 사용하십시오.

편집 2 : 다른 배경 이미지로이 작업을 여러 번 수행하는 경우 bgDiv 클래스를 대신 동적으로 위치를 지정합니다. 그것은 당신에게 몇 가지 JS를 저장합니다.

bgDiv는 div 콘텐츠의 나머지 부분보다 아래에 있어야하므로 내용의 콘텐츠보다 낮은 z-index을 지정해야합니다. 그러나 이것은 다른 요소 밑으로 떨어질 수 있습니다. 이 경우 div의 콘텐츠를 더 높은 z- 색인으로 설정하고 bgDiv의 z- 색인을 기본값 인 auto으로 두십시오.

.bgDiv { 
    position: 'absolute'; 
    z-index:-1; 
    /* left: '0px'; Set in JS */ 
    /* top: '0px'; Set in JS */ 
    width: '100%'; 
    height: '100%'; 
    /* background: 'url(' + url + ')'; Set in JS */ 
} 

Answer 2

질문에 올바르게 문제를 정의했으면 bgDiv을 div의 하위보다 낮은 위치에 그려야합니다.@trojansdestroy이

.bgDiv { 
    position: absolute; 
    z-index:-1; 
    left: 0; 
    top: 0; 
    width: '100%'; 
    height: '100%'; 
} 

을 제안 즉 당신은 당신이 다음 CSS에 정의 된 클래스 bgDiv으로

var bgDiv = $('<div class="bgDiv">').css('background', 'url(' + url + ')'); 
$(div).children().css({zIndex,2}); 
$(div).prepend(bgDiv); 

을 프로그래밍 방식으로이 작업을 수행해야하는 경우 모든 어린이의 z-index가 높은 것으로 설정해야