제대로

내가 뭘하려

세 부분으로 배경을 배치하는 방법 :제대로

#page-text { 
background-image: 
    url(./images/paper-top.png), 
    url(./images/paper-bottom.png), 
    url(./images/paper-mid-2.png); 
background-repeat: no-repeat, no-repeat, repeat-y; 
background-position: 0 0, 0 100%, top 10px; 

background-size: 100% auto; 
}

불행하게도 반복 부분은 모든 # 페이지 - 텍스트 위로하고 용지 상단이 부분적으로 투명하기 때문에 반복, 종이 중반 2 볼 수 있습니다 그 투명한 부분에. 그림의 경우 용지의 상단 모서리에 알 수 있습니다 (또는 live version 참조) background screenshot

출처

2014-02-23 Josef

이 질문에서 두 번째 anser를 살펴 보겠습니다. http://stackoverflow.com/questions/5427371/multiple-background-images-and-a-background-color/5427455#5427455. 이것은 당신에게 힌트를 줄 수 있습니다. 큰 divide를 제거 할 수 있도록 다른 div의 실제 텍스트를 래핑하는 것이 좋습니다. – mainguy

#page-text을 세 개의 수직 섹션으로 나누는 것이 좋습니다. 여분의 HTML 없이도이를 수행하는 좋은 방법은 :before 및 :after을 #page-text에 사용하고 상단 및 하단 배경 이미지를 각각 잡고 #page-text 위와 아래에 배치하는 것입니다. 이렇게하면 상단 및 하단 배경 이미지를 방해하지 않고 중간 배경 이미지를 필요한만큼 반복 할 수 있습니다. 또한 CSS3이 필요 없기 때문에보다 하위 호환성을 갖춘 솔루션을 제공합니다.

출처

2014-02-23 13:05:51

답변

관련 문제