jQuery 배경 이미지 위치

컨테이너에서 배경 이미지를 어떻게 옮길 수 있는지 막혔습니다.jQuery 배경 이미지 위치

나는 가운데에 960 너비의 컨테이너가 있습니다. 그런 다음 컨테이너 내에 배너가 있고 배너 뒤에 다른 레이어의 이미지가 필요하지만 여백은 -100 픽셀이지만 CSS를 사용하면 배경 이미지를 컨테이너 밖으로 이동할 수 없으므로 작동하지 않습니다. 어떻게하면 jQuery로이 작업을 수행 할 수 있습니까? 아니면 CSS를 사용하여 의미있는 올바른 해결 방법을 알고있는 사람이 있습니까?

미리 감사드립니다.

EDIT : http://i49.tinypic.com/s5wzmp.png 기본적으로 보니 빨간색이 배경 이미지이며, 배너 영역 뒤쪽에서 "피크"를 가져야합니다. 둘 다 960px 컨테이너 안에 있습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<style> 
body { background: #000;padding: 0; margin: 0; } 
.home-spot { width: 950px; height: 400px; background: #fff; margin: 0 auto; } 
.image { background: url('image.png') no-repeat; height: 200px; width: 100%; } 
.banner { background: #98cb4c; height: 180px; } 
</style> 
</head> 

<body> 
    <div class="home-spot"> 
     <div class="image"> 
      <div class="banner"> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

출처

2013-02-07 Karl

코드를 확인해야합니다. –

많이 볼 것이별로 없다. 나는 그냥 컬러 닷넷 블록을 사용하여 작동 시키려고 노력하고있다. – Karl

Ohhhhhh ..... 마침내 내가 원하는 것을 결국 볼 수 있다고 생각한다. 당신의 이미지 (빨간 블럭이 무엇이든간에)'absolute'와'left : -100px'로 부모님이 래퍼인지 확인하십시오. – Leeish

나는 그것을 관리했습니다!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<style> 
body { background: #000;padding: 0; margin: 0; } 
.home-spot { width: 950px; height: 400px; background: #fff; margin: 0 auto; } 
.image { background: url('image.png') no-repeat; height: 200px; width: 200px; position: absolute; margin-left: -100px; } 
.banner { background: #98cb4c; height: 200px; width: 950px; margin-left: 100px; } 
</style> 
</head> 

<body> 
<div class="home-spot"> 
    <div class="image"> 
     <div class="banner"> 

     </div> 

    </div> 

</div> 

</body> 
</html>

출처

2013-02-07 16:02:40 Karl

요소를 통해 요소가 무엇인지 볼 수 있도록 배경 이미지를 제거하지 않는 이유는 무엇입니까? javascript를 통해이 작업을 수행하는 경우보기 밖으로 이동하고 제거하는 것 사이에는 약간의 차이가 있습니다.

편집

나는 이제 이해 생각합니다. 빨간색 이미지 블록은 절대 값으로 배치해야하며 왼쪽 값을 -100 픽셀 또는 그 이상으로 설정해야합니다. 그런 다음 정적이 아닌 다른 정의 된 위치로 첫 번째 부모 블록 외부로 이동합니다.

http://jsfiddle.net/UF3nd/

<div id="main"> 
    <div id="wrap"> 
     <div id="banner"> 
      <div id="peak"> 
       I'm in back 
      </div> 
      I'm in front 
     </div> 
    </div> 
</div> 

#banner { 
    background: orange; 
    position: relative; 
    width: 100%; 
    height: 50px; 
} 
#peak { 
    background: green; 
    width: 50px; 
    height: 50px; 
    position: absolute; 
    left: -50px; 
}

출처

2013-02-07 15:37:06 Leeish

대형 모니터의 경우 배경 이미지가 960px 컨테이너 외부에 있어야합니다. 그래서 그것은 시야에서 벗어나지 않을 것입니다. – Karl

맞아요,하지만 당신의 추리가 뒤따 랐을 때 그 배경을 숨기려면 배경 이미지 속성을 위치를 바꾸는 것보다 none으로 설정하십시오. – Leeish

어디에서 숨기고 싶은 인상을 받고 있습니까? – Karl

여기에 당신이 당신이하려고하는 일을 할 수있는 하나 개의 방법 :

이

는 내가 생각 원하는 것입니다

http://jsfiddle.net/BuAQC/1/

html로 :

<div class="full-width"> 
    <div class="width-960"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at convallis urna. Proin id pharetra erat. Etiam fringilla sem sed leo ullamcorper sed ornare odio porttitor. Nulla ullamcorper, diam at fermentum egestas, enim nisl dapibus turpis, a sodales leo enim consequat augue. Praesent vel dapibus mauris. Fusce ut sem quis dolor condimentum accumsan in eget ipsum. Curabitur placerat molestie justo, sit amet viverra lectus euismod id. Etiam leo elit, iaculis sit amet imperdiet consectetur, mollis vitae metus. Aliquam sodales adipiscing tortor, sed venenatis velit ullamcorper non. Morbi accumsan posuere quam non dictum. Cras libero leo, adipiscing non convallis vitae, eleifend ut odio. Praesent convallis lectus sollicitudin risus dapibus laoreet.</p> 
    </div> 
</div>

CSS는이 :

.full-width { 
    background-color: #333; 
} 

.width-960 { 
    background: #dcdcdc; 
    width: 920px; 
    padding: 20px; 
    margin: 0 auto; 
}

출처

2013-02-07 15:51:44

무엇? 이 문제는 내 문제와 어떻게 관련이 있습니까? – Karl

게시 한 코드를 통해 960 너비를 넘어선 960 요소 뒤에 배경을 가질 수 있습니다. 사과하지 않으면 귀하의 질문에 오해했습니다. 오직 도움을 시도 : –

당신이 내 질문을 오해했다고 생각하지만, 어쨌든 그것을 해결하지만 노력해 주셔서 감사합니다. – Karl

답변

관련 문제