배경색과 관련된 CSS @media 인쇄 문제;
앱에 맞게 인쇄 가능한 스타일시트를 만들려고 하는데 문제가 있습니다.background-color인에@media print.
@media print {
#header{display:none;}
#adwrapper{display:none;}
td {
border-bottom: solid;
border-right: solid;
background-color: #c0c0c0;
}
}
다른 건 다 가능해요, 테두리 등은 수정할 수 있지만요.background-color 내용이 제 도 있다는 것을 .더 자세한 내용이 없으면 제 질문에 대답하지 못할 수도 있다는 것을 알았습니다.전에 이런 문제나 비슷한 문제가 있었던 사람이 있는지 궁금했을 뿐입니다.
Chrome에서 백그라운드 인쇄를 활성화하려면:
body {
-webkit-print-color-adjust: exact !important;
}
편집: Chrome, Safari 및 Firefox의 경우:
body{
-webkit-print-color-adjust:exact !important;
print-color-adjust:exact !important;
}
사용자가 인쇄 설정에서 "배경 색상 및 이미지 인쇄"를 해제한 경우 CSS가 이를 재정의하지 않으므로 항상 이를 고려하십시오.기본 설정입니다.
배경색과 이미지를 인쇄할 수 있도록 설정하면 사용자가 가지고 있는 것이 작동합니다.
그것은 다양한 장소에서 발견됩니다.IE9베타에서는 인쇄->페이지 옵션의 용지 옵션에 있습니다.
FireFox에서 페이지 설정 -> [형식 & 옵션] 탭 아래에 있습니다.
알겠습니다.
CSS:
box-shadow: inset 0 0 0 1000px gold;
테이블 셀을 포함한 모든 박스에 적용됩니다!!!
- (PDF-프린터 출력 파일을 믿으려면..?)
- Ubuntu의 Chrome + Firefox에서만 테스트됨...
이것을 시도해 보세요. Google Chrome에서 효과가 있었습니다.
<style media="print" type="text/css">
.page {
background-color: white !important;
}
</style>
-webkit-print-color-adjust: exact; 당신이 사용해야 하는 단독.!important는라는
이것은 내가 추가한 후 크롬에서 미리보기를 인쇄하는 것입니다.!important각각의background-color그리고.color 태그의 성여각여성에
이것은 추가하기 전에 크롬으로 미리보기를 인쇄하는 것입니다.!important
이제, 어떻게 해야하는지 알기 위해,inject !importantdiv의 스타일을 확인하려면 이 답변을 확인하십시오. "!중요한" 규칙이 있는 스타일을 주입할 수 없습니다.
(최소한 현대의 Chrome에서는) 작동하는 두 가지 솔루션:
- !정규 css 선언 작업에서 중요한 권리 (@media print에도 없음)
- svg사용
"프린터 친화적" 페이지를 만들고 싶다면 @media print CSS에 "!important"를 추가하는 것을 추천합니다.대부분의 브라우저는 배경 이미지, 색상 등을 인쇄하도록 권장합니다.
예:
background:#3F6CAF url('example.png') no-repeat top left !important;
background-color: #3F6CAF !important;
다른 게시물에 언급된 인쇄 테두리 옵션을 활성화하지 않고도 할 수 있는 또 다른 방법이 있습니다.테두리가 인쇄되어 있기 때문에 이 해킹을 통해 단색의 배경색을 시뮬레이션할 수 있습니다.
.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"> </td>
<td class="your-background"> </td>
<td class="your-background"> </td>
</tr>
</table>
이것이 배경색이 보이도록 추가 코드와 추가적인 주의가 필요하지만, 이것이 제게 알려진 유일한 해결책입니다.
은 에서는 하지 과 이외의 하지 않습니다.display: block;아니면display: table-cell;를 들면, <table class="your-background">그리고.<tr class="your-background">안 될 겁니다
모든 브라우저에서 배경색을 얻는 데 사용합니다(IE9+ 필요).
크롬은 이런 것을 사용해본 적이 있는데 잘 어울렸습니다.
몸표 안에,
<body style="-webkit-print-color-adjust: exact;"> </body>
또는 특정한 요소의 경우, 테이블이 있고 셀을 채우고 싶다면,
<table><tr><td style="-webkit-print-color-adjust: exact;"></tr></table>
에도 불구하고!important일반적으로 눈살을 찌푸리게 하는 사용법, 이것은 불쾌하게 하는 코드입니다.bootstrap.css블는을다이다h을mehg블ssd는이ebackground-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;
}
}
이는 부트스트랩 기본값보다 규칙이 더 구체적이기 때문에 작동합니다.
방금 인쇄 매체 쿼리에 이 토막글을 추가했는데 모든 스타일이 의도한 대로 적용되었습니다.
* {
color-adjust: exact!important;
-webkit-print-color-adjust: exact!important;
print-color-adjust: exact!important;
}
배경색도 "인쇄"되지 않는 Google Apps Script의 html 출력에서 PDF를 생성하려고 할 때 비슷한 문제가 발생했기 때문에 이 문제를 발견했습니다.
-webkit-print-color-adjust:exact;그리고.!important물론 해결책은 효과가 없었지만,box-shadow: inset 0 0 0 1000px gold; hack,합니다 :)잘요다말말다)말요잘d :)
최근 인쇄 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 */
2016/10년까지 크롬, 파이어폭스, 오페라 및 에지에 대한 테스트 및 작동.모든 브라우저에서 작동해야 하며 항상 예상대로 보여야 합니다.
네, 배경색 인쇄를 위한 크로스 브라우저 실험을 조금 해봤습니다.복사, 붙여넣기 및 즐기기만 하면 됩니다!
부트스트랩을 위한 전체 인쇄 가능 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>
제가 찾은 가장 좋은 "해결책"은 눈에 띄는 "인쇄" 버튼이나 링크를 제공하는 것인데, 이는 작은 대화 상자가 튀어나와 배경 및 이미지 인쇄가 가능하도록 프린터 설정을 조정해야 한다는 것을 과감하고 짧고 간결하게 설명하는 것입니다.이것은 저에게 매우 성공적이었습니다.
경우에 따라(내용이 없지만 배경이 있는 블록), 각 블록에 대해 개별적으로 테두리를 사용하여 재정의할 수 있습니다.
예를 들어,
.colored {
background: #000;
border: 1px solid #ccc;
width: 8px;
height: 8px;
}
@media print {
.colored div {
border: 4px solid #000;
width: 0;
height: 0;
}
}
* {
-webkit-print-color-adjust: exact;
}
또한 Enable > Emuse CSS Media From > Inspact > More Tools > Render를 사용합니다.매우 자세한 단계는 여기에서 확인할 수 있습니다.
태그를 이용하시면 됩니다.canvasIE9, Gecko, Webkit에서 작동하는 배경을 "그립니다.
배경색(또는 배경색이 포함된 이미지) 대신 이미지를 사용하는 것이 괜찮다면 아래 솔루션은 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;
}
}
설정 안 함background-color인쇄 스타일시트 안에 있습니다.그냥 일반 css 파일에 속성을 설정하면 잘 작동합니다 :)
다음 예제를 확인합니다.머리말과 바닥글이 있는 궁극 인쇄 HTML 템플릿
데모: 머리글과 바닥글이 포함된 궁극의 인쇄 HTML 템플릿 데모
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 and Edge에서 작동
body{
background-color: #E5FFE5;
}
.bg_print{
border-bottom: 30px solid #FFCC33;
}
.orange_bg_print_content{
margin-top: -25px;
padding: 0 10px;
} <div class="bg_print">
</div>
<div class="orange_bg_print_content">
My Content With Background!
</div>Chrome, Firefox 및 Edge에서 테스트 및 작동...
언급URL : https://stackoverflow.com/questions/3893986/css-media-print-issues-with-background-color
'programing' 카테고리의 다른 글
| 하위 쿼리에 가입하려면 어떻게 해야 합니까? (0) | 2023.09.16 |
|---|---|
| mysql의 값에서 선택 (0) | 2023.09.16 |
| 문자열 출력: C#의 형식 또는 콘캣? (0) | 2023.09.16 |
| nvm: N/A: 버전 "N/A -> N/A"가 아직 설치되지 않았습니다. (0) | 2023.09.16 |
| 정의되지 않은 함수 oci_connect() 호출 (0) | 2023.09.16 |