브라우저가 CSS에서 배경 이미지를 인쇄하도록하려면 어떻게해야합니까?

이 질문 은 이전에 요청 되었지만 내 경우에는 해결책이 적용되지 않습니다. 특정 배경 이미지가 페이지에 통합되어 인쇄되도록하고 싶습니다. (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

유사 요소를 사용하십시오. 많은 브라우저가 배경 이미지를 무시하지만 콘텐츠가 이미지로 설정된 의사 요소는 기술적으로 배경 이미지가 아닙니다. 그런 다음 배경 이미지를 이미지가 있어야하는 대략적인 위치에 배치 할 수 있습니다 (원본 이미지만큼 쉽고 정확하지는 않지만).

한 가지 단점은 이것이 Chrome에서 작동하려면 인쇄 미디어 쿼리 외부에서이 동작을 지정한 다음 인쇄 미디어 쿼리 블록에서 표시되도록해야한다는 것입니다. 그래서 이렇게 ...

.image:before{
        visibility:hidden;
        position:absolute;
        content: url("your/image/path");
    }   

@media print {
.image{
   position:relative;
    }
    .image:before{
       visibility:visible;
       top:etc...
    }       
}

단점은 일반적인 페이지로드시 이미지가 자주 다운로드되어 불필요한 대량 추가가 발생한다는 것입니다. 원본의 보이는 이미지에 이미 사용한 것과 동일한 이미지 / 경로를 사용하여이를 방지 할 수 있습니다.

중요한 속성을 배경 이미지에 추가하면 Google 크롬에서 작동합니다. 먼저 속성을 추가하고 다시 시도하십시오. 그렇게 할 수 있습니다.

    .inputbg {
background: url('inputbg.png') !important;  

}

고정 된 색상에 테두리를 사용할 수 있습니다.

 borderTop: solid 15px black;

그라데이션 배경의 경우 다음을 사용할 수 있습니다.

    box-sizing: border-box;
    border-style: solid;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-image: linear-gradient(to right, red, blue) 100%;
    border-image-slice: 1;
    border-width: 18px;

https://gist.github.com/danomanion/6175687 은 배경 이미지 대신 사용자 정의 글 머리 기호를 사용하여 우아한 솔루션을 제안합니다.

   a.logo {
     display: list-item;
     list-style-image: url("../images/desired-background.png");
     list-style-position: inside;
   }

이것을 포함함으로써

@media print {
}

블록, 나는 배경 이미지로 렌더링 된 화면의 투명에 흰색 로고를 인쇄용 투명에 검은 색 로고로 바꿀 수 있습니다.

다음과 같은 몇 가지 트릭을 할 수 있습니다.

<style>
    @page {
        size: 21cm 29.7cm;
        size: landscape
        /*margin: 30mm 45mm 30mm 45mm;*/

    }
    .whater{
        opacity: 0.05;
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 9999;
    }
</style>

본문 태그 :

<img src="YOUR IMAGE URL" class="whater"/>