이 질문 은 이전에 요청 되었지만 내 경우에는 해결책이 적용되지 않습니다. 특정 배경 이미지가 페이지에 통합되어 인쇄되도록하고 싶습니다. (CSS 스프라이트로 사용되는 이미지가 여러 개 있기 때문에 페이지에서 직접 이미지가 아닙니다.)
같은 질문에 대한 또 다른 해결책 list-style-image
은 모든 아이콘에 대해 다른 이미지가있는 경우에만 작동하며 CSS 스프라이트가 불가능한 경우에만 작동하는을 사용하는 것입니다.
아이콘이 인라인으로 된 별도의 페이지를 만드는 것 외에 다른 해결책이 있습니까?
답변
브라우저의 인쇄 방법을 거의 제어 할 수 없습니다. 기껏해야 SUGGEST 할 수 있지만 브라우저의 인쇄 설정에 “배경 이미지를 인쇄하지 않음”이있는 경우 페이지를 다시 작성하지 않고는 배경 이미지를 다른 콘텐츠 뒤에있는 떠 다니는 “전경”이미지로 전환 할 수있는 방법이 없습니다.
답변
Chrome 및 Safari -webkit-print-color-adjust: exact;
를 사용하면 요소에 CSS 스타일 을 추가하여 배경색 및 / 또는 이미지를 강제로 인쇄 할 수 있습니다.
답변
기본적으로 브라우저에는 배경색 및 이미지 인쇄 옵션이 꺼져 있습니다. 이를 우회하기 위해 CSS에 몇 줄을 추가 할 수 있습니다. 다음을 추가하십시오.
* {
-webkit-print-color-adjust: exact !important; /* Chrome, Safari */
color-adjust: exact !important; /*Firefox*/
}
답변
CSS로 배경 이미지를 인쇄하는 방법을 찾았습니다. 배경이 어떻게 배치되어 있는지에 따라 약간 다르지만 내 응용 프로그램에서 작동하는 것 같습니다.
기본적으로 @media print
스타일 시트 끝에 하고 본문 배경을 약간 변경합니다.
예를 들어, 현재 CSS가 다음과 같은 경우 :
body {
background:url(images/mybg.png) no-repeat;
}
스타일 시트 끝에 다음을 추가합니다.
@media print {
body {
content:url(images/mybg.png);
}
}
이렇게하면 이미지가 본문에 “전경”이미지로 추가되어 인쇄 가능하게됩니다. z-index
적절 하게 만들기 위해 몇 가지 추가 CSS를 추가해야 할 수도 있습니다 . 그러나 다시 말하지만, 페이지가 어떻게 배치되는지에 달려 있습니다.
이것은 인쇄보기에 표시 할 헤더 이미지를 가져올 수 없을 때 저에게 효과적이었습니다.
답변
아래 코드는 나에게 잘 작동합니다 (적어도 Chrome에서는).
여백 및 페이지 방향 컨트롤도 추가했습니다. (세로, 가로)
<style type="text/css" media="print">
@media print {
body {-webkit-print-color-adjust: exact;}
}
@page {
size:A4 landscape;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin: 0;
-webkit-print-color-adjust: exact;
}
</style>
답변
! important 속성을 사용해야합니다. 이렇게하면 인쇄 할 때 스타일이 유지 될 가능성이 크게 높아집니다.
#example1 {
background:url(image.png) no-repeat !important;
}
#example2 {
background-color: #123456 !important;
}
답변
@ ckpepper02가 말했듯이 body content : url 옵션이 잘 작동합니다. 그러나 약간 수정하면 다음과 같이 : before 의사 요소를 사용하여 일종의 헤더 이미지를 추가하는 데 사용할 수 있습니다.
@media print {
body:before { content: url(img/printlogo.png);}
}
페이지 상단에 이미지가 표시되며 제한된 테스트에서 Chrome 및 IE9에서 작동합니다.
-hanz