웹 페이지에 바둑판 식으로 이미지 인쇄

지역 전체에 이미지를 바둑판 식으로 배열 할 수 있어야하지만 그 패턴이 인쇄되어 있어야합니다.웹 페이지에 바둑판 식으로 이미지 인쇄

전통적으로 반복 된 배경을 사용하여 이미지를 바둑판 식으로 배열하지만 명시 적으로 켜기 전까지는 배경이 대부분의 브라우저에서 인쇄되지 않습니다.

예를 보려면 this jsFiddle을 참조하십시오 (이 예는 올바르게 인쇄되지 않습니다).

더러운 트릭은 크로스 해치 패턴이 인쇄되는 한 완벽하게 허용됩니다. jsFiddle의

관련 비트 아래 발췌 :

<style> 
#danger div { background: white; padding:15px; margin:15px; } 
#danger { margin:15px;border: 1px solid black; 
    background: url(http://i.stack.imgur.com/pTOTJ.png); 
} 
</style> 
<div id="danger"><div> 
    <h3>Danger Will Robinson</h3> 
    <p>Don't forget to frob the sporkle. 
</div></div>

출처

2012-10-21 tylerl

나는 그것을 이해하지 못한다. 예를 들어 주시겠습니까? –

바로 여기에 예제가 있습니다. 볼 수있는 jsFiddle을 클릭하십시오. 그러나 인쇄 할 경우 십자형 패턴이 인쇄되지 않습니다. – tylerl

좋아, 이제 알았어 ^^ 이럴 수있는 방법이 없다고 생각합니다. 미안 해요. 인쇄 스타일 시트를 사용 해본 적이 있습니까? –

가이 작업을 수행 할 수있는 크로스 브라우저 방식이 아닌 최고의 옵션은 (다른 스타일) 인쇄 스타일을하는 것입니다 HTML 파일에 배경을 넣으십시오. Chrome 및 Safari에서 CSS 배경 화면을 인쇄하도록하려면 인쇄 할 각 요소에 -webkit-print-color-adjust: exact;을 사용할 수 있습니다. http://jsfiddle.net/xjD3X/2/ 그것은 당신의 텍스트 뒤에 이미지를 배치하는 절대 위치를 사용하며이 HTML에이기 때문에, 그것은 인쇄 :

이 내 의견을 바탕으로 한 http://jsfiddle.net/xjD3X/1/

출처

2012-10-21 00:48:04

위,이를 만들어보십시오

#bg {display:block; position:absolute; top:0; left: 0; z-index: 0;} 
#danger div { background: white; padding:15px; margin:15px; position:relative; z-index: 100; }

유일한 문제는 자체적으로 타일링되지 않는다는 것입니다. 그러나 당신의 이미지가 Jsfiddle에서 사용한 이미지와 같다면, 더 큰 버전은 너무 무거워지지 않을 것입니다.

이미지의 스팬을 사용했지만 div 또는 다른 태그를 사용할 수 있습니다.

출처

2012-10-21 00:57:21 coopersita

웹 페이지에 바둑판 식으로 이미지 인쇄

답변

관련 문제