HTML/CSS 이미지 분할기/분리기 오버레이/메소드?

Question

나는 매끄러운 (내 의견으로는) 웹 사이트를 만들기에 충분할 정도로 CSS 예제와 HTML을 엉망으로 만들었다. CSS (섹션)의 두 배경 이미지가 있는데, 둘 다 내 styles.css 파일의 요소를 호출하여 배경을 흑백으로 표시합니다. 그러나이 두 섹션 사이에 이미지 분배기가 있어야합니다.

저는 Using an image as a separator in HTML and CSS 과 같은 기사를 보았습니다.

나는 <> 방법을 시도했지만 아무런 결과도 얻지 못했지만 "div class" 메서드를 시도해 보았습니다. 내 이미지가 나타났습니다! 그러나 그것은 두 개의 다른 배경/섹션으로 덮혀 있거나 덮어 져 있습니다.

두 개의 섹션에서 배경색이 분리되는 중간 이미지가되도록 내 이미지를 어떻게 배치합니까? 내 두 섹션/배경을 오버레이 할 수 있도록 만드는 방법은 무엇입니까? 헤로인, 분할 이미지 - 흰색 배경/CSS 섹션

WWWWWWWWWWW

OOOOOOOOOOO < -

.. 제가 그것을처럼되고 싶은 것이 무엇 ASCII 아트 그려

WWWWWWWWWWW <하자 중앙, 오버레이 둘 다

BBBBBBBBBBB

,

BBBBBBBBBBB < - 검은 색/CSS 섹션

감사합니다, 나는 더 내 질문에 명확히해야하는 경우, 나는 행복 할 것입니다!

다음은이 두 부분 사이에, 여기 내 코드는 당신이 볼 수 있듯이 내 index.php를

.... 

</section> 

<div class="Halloweeny"></div> 

     <!-- Image section --> 
     <section class="image-section red" id="image-section"> 

..... 

에서 내 styles.css가

.Halloweeny { 
     height:100px; 
     width: 100 % ; 
     background: url('/images/halloween.png'); 
     background-position: 50% 50%; 
     z-index: 99; 
} 

내 코드입니다. 당신은 2 부와 영상 분배기를 포장하는 사업부를 만들고

2) 절대 위치에 Halloweeny 클래스를 설정 상대적 위치를 설정할 수 있습니다

Answer 1

내게는 잘하지만, 조엘 보넷 로드리게스 코드의 자신의 조각에 가장 나를 도와 할 수있어.

나는 주위에서 물어 봤는데, 내 친구의 대답을 생각해 냈는데, 나는 나의 사본을 만들기 위해 JSFiddle을 만들었다.

https://jsfiddle.net/s7sLujgc/2/

/* Here is my final code, that works. */ 

CSS :

.Halloweeny:before { 
     content: ""; 
     position: relative; 
     top: -79.5px; 
     display: block; 
     height:185px; 
     width: 120 % ; 
     background: url('/images/halloween.png') center center; 
     -webkit-background-size: cover; /* <--      */ 
     -moz-background-size: cover; /* <-- I'm not sure these do */ 
     -o-background-size: cover; /* <-- anything at all  */ 
    } 

HTML : 태그 앞에 : 그냥 두 번째 섹션 내 Halloweeny를 추가하고 추가하는 데 필요한 것

<section class="image-section red back Halloweeny" id="image section"> 

여기에, 블록과 위쪽의 내용과 모든 점에서 추가합니다.

, +1 조엘을 도와 준 모든 사람들에게 감사, 감사는 대부분의 내 친구에 나를 도와 준! :)

Answer 2

1), 최고 0, 하단 0, 오른쪽, 0 0을 왼쪽 여백 자동 및 Z- 색인 10은 정상이어야합니다

나는 그렇게해야한다고 생각합니다. 그것이 원하는지 확실하지 않은 경우.

향후 질문을 위해 코드를 codepen 또는 jsfiddle에 넣을 수 있으면 좋습니다.

Answer 3

이 작동해야합니다 귀하의 답변의 어느

.Halloweeny{ 
     height:100px; 
     width: 100 % ; 
     background: url('/images/halloween.png') no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
    }