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

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

---

이 질문 은 이전에 요청 되었지만 내 경우에는 해결책이 적용되지 않습니다. 특정 배경 이미지가 페이지에 통합되어 인쇄되도록하고 싶습니다. (CSS 스프라이트로 사용되는 이미지가 여러 개 있기 때문에 페이지에서 직접 이미지가 아닙니다.)

같은 질문에 대한 또 다른 해결책 list-style-image은 모든 아이콘에 대해 다른 이미지가있는 경우에만 작동하며 CSS 스프라이트가 불가능한 경우에만 작동하는을 사용하는 것입니다.

아이콘이 인라인으로 된 별도의 페이지를 만드는 것 외에 다른 해결책이 있습니까?

---

브라우저의 인쇄 방법을 거의 제어 할 수 없습니다. 기껏해야 SUGGEST 할 수 있지만 브라우저의 인쇄 설정에 "배경 이미지를 인쇄하지 않음"이있는 경우 페이지를 다시 작성하지 않고는 배경 이미지를 다른 콘텐츠 뒤에있는 떠 다니는 "전경"이미지로 전환 할 수있는 방법이 없습니다.

---

Chrome 및 Safari를 사용하면 CSS 스타일 -webkit-print-color-adjust: exact;을 요소에 추가하여 배경색 및 / 또는 이미지를 강제로 인쇄 할 수 있습니다.

---

CSS로 배경 이미지를 인쇄하는 방법을 찾았습니다. 배경이 어떻게 배치되어 있는지에 따라 약간 다르지만 내 응용 프로그램에서 작동하는 것 같습니다.

기본적으로 @media print스타일 시트 끝에 를 추가 하고 본문 배경을 약간 변경합니다.

예를 들어, 현재 CSS가 다음과 같은 경우 :

body {
background:url(images/mybg.png) no-repeat;
}

스타일 시트 끝에 다음을 추가합니다.

@media print {
body {
   content:url(images/mybg.png);
  }
}

이렇게하면 이미지가 본문에 "전경"이미지로 추가되어 인쇄 가능하게됩니다. z-index적절 하게 만들기 위해 몇 가지 추가 CSS를 추가해야 할 수도 있습니다 . 그러나 다시 말하지만, 페이지가 어떻게 배치되는지에 달려 있습니다.

이것은 인쇄보기에 표시 할 헤더 이미지를 가져올 수 없을 때 저에게 효과적이었습니다.

---

기본적으로 브라우저에는 배경색 및 이미지 인쇄 옵션이 꺼져 있습니다. 이를 우회하기 위해 CSS에 몇 줄을 추가 할 수 있습니다. 다음을 추가하십시오.

* {
    -webkit-print-color-adjust: exact !important;   /* Chrome, Safari */
    color-adjust: exact !important;                 /*Firefox*/
}

---

아래 코드는 나에게 잘 작동합니다 (적어도 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;
}

---

Like @ckpepper02 said, the body content:url option works well. I found however that if you modify it slightly you can just use it to add a header image of sorts using the :before pseudo element as follows.

@media print {
  body:before { content: url(img/printlogo.png);}
}

That will slip the image at the top of the page, and from my limited testing, it works in Chrome and the IE9

-hanz

---

Use psuedo-elements. While many browsers will ignore background images, psuedo-elements with their content set to an image are technically NOT background images. You can then position the background image roughly where the image should have gone (though it's not as easy or precise as the original image).

One drawback is that for this to work in Chrome, you need to specify this behavior outside of your print media query, and then make it visible in the print media query block. So, something like this...

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

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

The drawback is that the image will often be downloaded on normal page loads, adding unnecessary bulk. You can avoid that by just using the same image/path you'd already used for the original, visible image.

---

it is working in google chrome when you add !important attribute to background image make sure you add attribute first and try again, you can do it like that

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

}

---

You can use borders for fixed colors.

 borderTop: solid 15px black;

and for gradient background you can use:

    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 proposes an elegant solution, using a custom bullet in place of a background image:

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

By including this within a

@media print {
}

block, I'm able to replace a white-on-transparent logo on the screen, rendered as a background-image, with a black-on-transparent logo for print.

---

You can do some tricks like that:

<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>

In body tag:

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

참고URL : https://stackoverflow.com/questions/6670151/how-can-i-force-browsers-to-print-background-images-in-css