배경색과 관련된 CSS @media 인쇄 문제;

176

나는이 회사에서 처음 왔으며 몇 마일의 CSS를 사용하는 제품이 있습니다. 앱에 인쇄 가능한 스타일 시트를 만들려고하는데에 문제가 background-color있습니다 @media print.

    @media print {
      #header{display:none;}
      #adwrapper{display:none;}
      td {
        border-bottom: solid; 
        border-right: solid; 
        background-color: #c0c0c0;
      }
    }

다른 모든 기능은 테두리를 수정할 수 있지만 background-color인쇄에서는 나오지 않습니다. 이제 나는 더 자세한 내용 없이는 내 질문에 대답하지 못할 수도 있음을 이해합니다. 누군가 전에이 문제가 있거나 비슷한 것이 있으면 궁금했습니다.

css  media-queries 
— 웨스턴 왓슨
소스
글쎄, W3C CSS-Validator ( jigsaw.w3.org/css-validator )를 전달합니다 . 이상하다
— GôTô
더 이상 문제가되지 않습니다. 부트 스트랩 페이지가 있고 부트 스트랩에 @media print테이블 (예 : 줄무늬)에서 배경색을 제거 하는 쿼리 가 있기 때문에이 문제가 발생했습니다 .
— Martin Thoma
@MartinThoma 문제를 어떻게 해결 했습니까? 템플릿 템플릿에서 CSS를 제거 했습니까?
— EduLopez

답변:

242

사용자가 인쇄 설정에서 "배경색 및 이미지 인쇄"를 해제 한 경우 CSS가이를 무시하지 않으므로 항상 설명해야합니다. 이것이 기본 설정입니다 입니다.

일단 설정되면 배경색과 이미지를 인쇄 할 수 있습니다.

다른 곳에서 발견됩니다. IE9beta에서는 용지 옵션 아래의 인쇄-> 페이지 옵션에 있습니다.

FireFox에서는 옵션 아래의 페이지 설정-> [포맷 및 옵션] 탭에 있습니다.

— 라이언 테르 니에
소스
10
이 CSS를 통해 내 두뇌를 쌓아 두는 시간을 절약했습니다.
— Weston Watson
162
Chrome 및 Safari를 사용하면 CSS 스타일 "-webkit-print-color-adjust : exact;"를 추가 할 수 있습니다. 배경색 및 / 또는 이미지를 강제로 인쇄하기위한 요소
— Marco Bettiolo
11
! @MarcoBettiolo는 웹킷 빌드 최근에 작동하지 않는 것, 중요한 것은 그러나 않습니다
— Hedde 반 데르 된 Heide
2
규칙에 중요를 추가하면 나에게도 해결되었습니다.
— Thiago Duarte
14
이것을 확장하기 위해 색상 조정을 추가했습니다. FF가 작동합니다. 전체 코드는 다음과 같습니다*{ color-adjust: exact; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
— BitBug
252

Chrome에서 백그라운드 인쇄를 사용하려면 다음 단계를 따르세요.

body {
  -webkit-print-color-adjust: exact !important;
}
— drolex
소스
7
이것은 대체 행 색상으로 테이블을 인쇄하는 문제를 해결 한 것으로 보입니다.
— Victor J. Garcia
Chrome의 인쇄 대화 상자가 첫 번째 시도에서 이미지를로드하지 않으므로 이미지 경로에 올바른 케이스를 사용해야합니다. 백그라운드 이미지 속성의 URL이 실제 폴더 이름의 대소 문자와 일치하지 않는 경우에만 발생합니다. (버전 48.0.2564.109 m에서보고)
— MPaul
3
파이어 폭스와 IE의 대안
— Shan Khan
5
미래의 여행자를위한 참고 사항 : color-adjust대신 사용할 수 있습니다 .
— Константин Ван
@ КонстантинВан 2019 년 4 월 현재 Chrome에서 지원되지 않습니다.이 문서는 firefox 문서입니다.
— Thomas
83

알았다:

CSS : 

box-shadow: inset 0 0 0 1000px gold;

테이블 셀을 포함한 모든 상자에서 작동합니다 !!!

  • (PDF 프린터 출력 파일을 믿어야하는 경우 ..?)
  • 우분투의 Chrome + Firefox에서만 테스트되었습니다 ...
— T4NK3R
소스
5
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fffada', endColorstr='#fffada')"; /* IE8 */ 스프라이트 이미지를 표시하려면 img / clip 기술 css-tricks.com/css-sprites-with-inline-images를 사용하여 IE8 및 IE9 지원을 추가 할 수 있습니다. 그러면 IE9 및 FF의 이미지가 표시됩니다 ( IE8 아님)
— emik
2
@evami의 제안으로도 일반적인 브라우저에서는 훌륭하지만 IE에서는 그렇지 않습니다.
— woz
@ woz IE8 / 9가있는 프로젝트에서 작동합니다. 상자 그림자와 같은 그라디언트는 강제 브라우저 재설정으로 제거되지 않는 추가 배경 요소를 추가합니다. CSS를 공유 하시겠습니까?
— emik
2
최신 Chrome (60)에서는 작동하지 않는 것 같습니다.
— swervo
1
이것은 Chrome에서 실패합니다. 나는 69를 사용하고 있습니다 .60 이상 (@swervo의 의견에 따라) 이후 로 깨 졌음을 나타냅니다.
— iconoclast
34

이것을 시도해보십시오 .Google 크롬에서 저에게 효과적이었습니다.

<style media="print" type="text/css">
    .page {
        background-color: white !important;
    }
</style>
— 맥스
소스
22

-webkit-print-color-adjust: exact; 혼자서is Not enough 사용해야합니다!important 속성과 함께 합니다

이 크롬에 미리보기를 인쇄 한 후 내가 추가 한 !important각 background-color및 color각 태그의 attrubute

크롬에서 인쇄 미리보기

그리고 이것은 추가 하기 전에 크롬에 미리보기를 인쇄 하고 있습니다.!important

여기에 이미지 설명을 입력하십시오

이제 inject !important스타일을 div 하는 방법을 알고 싶다면 이 답변을 확인하십시오 .“! important”규칙으로 스타일을 주입 할 수 없습니다

— Basheer AL-MOMANI
소스
배경색을 재설정하는 @print 스타일 시트가 이미 있기 때문일 수 있습니다.
— Niccolo M.
세상에! 작동하지만 어떻게 작동합니까? 설명해 주시겠습니까?
— rahim.nagori
1
그것은 지금까지 나를 위해 일한 유일한 솔루션입니다. <div style = "-webkit-print-color-adjust : 정확한! important; background-color : red! important;"> ... </ div>
— Thomas
10

작동하는 두 가지 솔루션 (최신 Chrome에서-최소한 테스트를 거치지 않은) :

  1. ! 정규 CSS 선언 작업에서 중요한 권리 (@media 인쇄조차도 아님)
  2. svg 사용
— yar1
소스
6
! "배경색 및 이미지 인쇄"가 활성화되어있는 한 모든 최신 브라우저의 문제를 해결하는 것이 중요합니다.
— Chris Hynes
2
! 본체와 함께 사용하면 사용자의 개입없이 중요하게 작동합니다. {-webkit-print-color-adjust : exact; } (위의 설명에 따라)
— yar1
2
내가 사용 color-adjust하거나 웹킷 변형을 사용하면 실제로 중요한 규칙이 필요하지 않다는 것을 알았습니다.
— Kasapo
7

"프린터 친화적"페이지를 만들려면 @media print CSS에 "! important"를 추가하는 것이 좋습니다. 이것은 대부분의 브라우저가 배경 이미지, 색상 등을 인쇄하도록 권장합니다.

예 :

background:#3F6CAF url('example.png') no-repeat top left !important;
background-color: #3F6CAF !important;
— 견과류 앤 맥주
소스
6

다른 게시물에 언급 된 인쇄 테두리 옵션 을 활성화 하지 않고 할 수있는 또 다른 트릭이 있습니다 . 테두리 가 인쇄 되므로 다음 핵으로 단색 배경색을 시뮬레이션 할 수 있습니다.

.your-background:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: -1;
  border-bottom: 1000px solid #eee; /* Make it fit your needs */
}

클래스를 요소에 추가하여 활성화하십시오.

<table>
  <tr>
    <td class="your-background">&nbsp;</td>
    <td class="your-background">&nbsp;</td>
    <td class="your-background">&nbsp;</td>
  </tr>
</table>

여기에는 배경색을 표시하기 위해 약간의 추가 코드와주의가 필요하지만, 나에게 알려진 유일한 솔루션입니다.

이 해킹이 아닌 다른 요소에서 작동하지 않습니다주의 display: block;또는 display: table-cell;그래서 예를 들어, <table class="your-background">및 <tr class="your-background">작동하지 않습니다.

우리는 모든 브라우저에서 배경색을 얻기 위해 이것을 사용합니다 (여전히 IE9 + 필요).

— 핵심
소스
1
그것은 미친 해킹이지만 적어도 인쇄 설정에 관계없이 어떤 형태의 배경색을 강제합니다. 훌륭하다, 고마워
— Brad Zacher
6

크롬의 경우 이와 같은 것을 사용했으며 나에게 도움이되었습니다.

본문 태그 내에서

<body style="-webkit-print-color-adjust: exact;"> </body>

또는 특정 요소의 경우 테이블이 있고 td, 즉 셀을 채우고 싶다면

<table><tr><td style="-webkit-print-color-adjust: exact;"></tr></table>
— 아미르 샤이 크
소스
5

!important사용법이 일반적으로 찌그러짐 에도 불구하고 bootstrap.css이것은 테이블 행이로 인쇄되지 못하게 하는 문제가되는 코드 입니다 background-color.

.table td,
.table th {
    background-color: #fff !important;
}

다음 HTML을 스타일링하려고한다고 가정 해 봅시다.

<table class="table">
    <tr class="highlighted">
      <td>Name</td>
      <td>School</td>
      <td>Height</td>
      <td>Weight</td>
    </tr>
</table>

이 CSS를 재정의하려면 스타일 시트에 다음과 같은 규칙을 추가하십시오.

@media print {
    table tr.highlighted > td {
        background-color: rgba(247, 202, 24, 0.3) !important;
    }
}

이는 규칙이 부트 스트랩 기본값보다 더 구체적이기 때문에 작동합니다.

— 알펜
소스
몇 시간 동안 검색 한 후이 답변을 찾았습니다. 나는 들어가서 Bootstrap.css와 WHAM에서 줄을 제거했습니다! 인쇄 가능한 배경의 색상!
— Mighty Ferengi 2016 년
1
감사합니다! 마지막으로, 이것은 나를 시작하고 달리는 대답이지만 추가해야했습니다. body {-webkit-print-color-adjust : exact! important; }
— Ocean Airdrop 19
3

배경색도 "인쇄"되지 않은 Google Apps Script의 html 출력에서 ​​PDF를 생성하려고 할 때 비슷한 문제가 발생했기 때문에이 문제가 발견되었습니다.

-webkit-print-color-adjust:exact;및 !important과정의 솔루션은 작동하지 않았다,하지만은 box-shadow: inset 0 0 0 1000px gold;않았다 ... 큰 해킹, 대단히 감사합니다 :)

— 로고
소스
2

최근 인쇄 CSS 경험에서 최근 2015 년 관련 지원을 추가 할 것이라고 생각했습니다.

인쇄 대화 상자 설정에 관계없이 배경과 색상을 인쇄 할 수있었습니다.

이렇게하려면 ! important & -webkit-print-color-adjust : exact! important 조합을 사용해야했습니다 . 배경과 색상을 올바르게 인쇄해야했습니다.

또한 색상을 선언 할 때 가장 완고한 영역이 대상에 직접 정의되어야한다는 것을 알았습니다. 예를 들면 다음과 같습니다.

<div class="foo">
 <p class="red">Some text</p>
</div>

그리고 당신의 CSS :

.red {color:red !important}
.foo {color:red !important} /* <-- This won't always paint the p */
— 홍옥
소스
2

테스트 및 작동2016/10까지 Chrome, Firefox, Opera 및 Edge에서모든 브라우저에서 작동하며 항상 예상대로 표시되어야합니다.

좋아, 나는 배경색을 인쇄하기 위해 약간의 브라우저 간 실험을했다. 복사, 붙여 넣기 및 즐기기 만하면됩니다!

다음은 부트 스트랩을위한 전체 인쇄 가능한 HTML 페이지입니다.

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">

    /* Both z-index are resolving recursive element containment */
    [background-color] {
        z-index: 0;
        position: relative;
        -webkit-print-color-adjust: exact !important;
    }

    [background-color] canvas {
        display: block;
        position:absolute;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

</style>
</head>

<!-- CONTENT -->
<body>

    <!-- PRINT ROW BLOCK -->
    <div class="container">

    <div class="row">
        <div class="col-xs-6">
            <div background-color="#A400C1">
                <h4>
                Hey... this works !
                </h4>
                <div background-color="#0068C1">
                    <p>
                    Ohh... this works recursive too !!
                    <div background-color="green" style="width: 80px; height: 60px">
                        Any size !!
                    </div>
                    </p>
                </div>
            </div>
        </div>

        <div class="col-xs-6">
            <div background-color="#FFCB83" style="height: 200px">
                Some content...
            </div>
        </div>

    </div>


<script>
    var containers = document.querySelectorAll("[background-color]");

    for (i = 0; i < containers.length; i++)
    {
        // Element
        var container = containers[i];
        container.insertAdjacentHTML('beforeend', '<canvas id="canvas-' + i + '"></canvas>');

        // Color
        var color = container.getAttribute("background-color");
        container.style.backgroundColor = color;

        // Inner Canvas
        var canvas = document.getElementById("canvas-" + i);
        canvas.width = container.offsetWidth;
        canvas.height = container.offsetHeight;
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = color;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    window.print();
</script>


</body>

</html>
— 헤로 셀로 힘
소스
1

내가 찾은 최고의 "솔루션"은 눈에 띄는 "인쇄"버튼 또는 링크를 제공하여 배경을 활성화하기 위해 프린터 설정 (ABC 123 글 머리 기호 명령으로)을 조정해야한다는 대담하고 간단하고 간결하게 설명하는 작은 대화 상자를 표시하는 것입니다. 그리고 이미지 인쇄. 이것은 나에게 매우 성공적이었습니다.

— 알라 노
소스
1

경우에 따라 (내용이 없지만 배경이있는 블록) 모든 블록에 대해 개별적으로 테두리를 사용하여 재정의 할 수 있습니다.

예를 들면 다음과 같습니다.

.colored {
  background: #000;
  border: 1px solid #ccc;
  width: 8px;
  height: 8px;
}

@media print {
  .colored div {
    border: 4px solid #000;
    width: 0;
    height: 0;
  }
}
— 게돈
소스
0

배경색 대신 이미지 (또는 배경색이있는 이미지)를 사용하는 것이 마음에 들지 않으면 아래 솔루션이 FireFox, Chrome 및 심지어 IE에서 오버라이드없이 나에게 도움이되었습니다. 이미지를 페이지 어딘가에 놓고 사용자가 인쇄 할 때까지 숨 깁니다.

배경 이미지가있는 페이지의 HTML

<img src="someImage.png" class="background-print-img">

CSS

.background-print-img{
    display: none;
}

@media print{
    .background-print-img{
        background:red;
        display: block;
        width:100%;
        height:100%;
        position:absolute;
        left:0;
        top:0;
        z-index:-10;
    }

}

— 크 실리
소스
나는 당신의 접근 방식을 취하여 IE11에서 작동 시키려고했지만 슬프게도 작동하지 않았습니다. 그것은 !important내 클래스의 각 속성에 값을 넣은 다음 작동하도록했습니다.
— Sal Alturaigi
0 
tr.group-title {
  padding-top: .5rem;
  border-top: 2rem solid lightgray;
}

tr.group-title > td h5 {
  margin-top: -1.9rem;
}

          <tbody>
            <tr class="group-title">
              <td colspan="6">
                <h5 align="center">{{ group.title }}</h5>
              </td>
            </tr>

Chrome 및 Edge에서 작동

— 바실리 이바노프
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.