인쇄 미리 보기에 배경색이 표시되지 않음
페이지를 인쇄하려고 합니다.그 페이지에서 나는 테이블에 배경색을 표시했습니다.크롬으로 인쇄 미리보기를 볼 때 배경색 속성을 사용하지 않습니다.
그래서 이 부동산을 사용해 보았습니다.
-webkit-print-color-adjust: exact;
그래도 색깔이 안 나와요.
.vendorListHeading {
background-color: #1a4567;
color: white;
-webkit-print-color-adjust: exact;
}
<div class="bs-docs-example" id="soTable" style="padding-top: 10px;">
<table class="table" style="margin-bottom: 0px;">
<thead>
<tr class="vendorListHeading" style="">
<th>Date</th>
<th>PO Number</th>
<th>Term</th>
<th>Tax</th>
<th>Quote Number</th>
<th>Status</th>
<th>Account Mgr</th>
<th>Shipping Method</th>
<th>Shipping Account</th>
<th style="width: 184px;">QA</th>
<th id="referenceSO">Reference</th>
<th id="referenceSO" style="width: 146px;">End-User Name</th>
<th id="referenceSO" style="width: 118px;">End-User's PO</th>
<th id="referenceSO" style="width: 148px;">Tracking Number</th>
</tr>
</thead>
<tbody>
<tr class="">
<td>22</td>
<td>20130000</td>
<td>Jim B.</td>
<td>22</td>
<td>510 xxx yyyy</td>
<td>zznn@abc.co</td>
<td>PDF</td>
<td>12/23/2012</td>
<td>Approved</td>
<td>PDF</td>
<td id="referenceSO">12/23/2012</td>
<td id="referenceSO">Approved</td>
</tr>
</tbody>
</table>
</div>
CSS는print-color-adjust: exact;알맞게 작동합니다.
그러나 인쇄를 위한 올바른 CSS를 가지고 있는지 확인하는 것은 종종 까다로울 수 있습니다.당신이 겪고 있는 어려움을 피하기 위해 몇 가지 일을 할 수 있습니다.우선 모든 프린트 CSS를 화면 CSS에서 분리합니다.이 작업은 다음을 통해 수행됩니다.@media print그리고.@media screen.
종종 약간의 추가적인 설정을 합니다.@media print인쇄할 때도 다른 CSS가 모두 포함되어 있기 때문에 CSS로는 부족합니다.이러한 경우 인쇄 규칙이 인쇄되지 않은 CSS 규칙을 자동으로 이기는 것이 아니기 때문에 CSS의 특수성을 인식하기만 하면 됩니다.
당신의 경우,print-color-adjust: exact작동 중입니다.하지만 당신의background-color그리고 색 정의는 더 높은 특수성을 가진 다른 CSS에 의해 능가되고 있습니다.
사용하는 것을 지지하지는 않습니다.!important거의 모든 환경에서 다음 정의가 적절하게 작동하여 문제를 노출합니다.
@media print {
tr.vendorListHeading {
background-color: #1a4567 !important;
print-color-adjust: exact;
}
}
@media print {
.vendorListHeading th {
color: white !important;
}
}
다음은 fiddle(인쇄 미리보기를 쉽게 하기 위해 내장됨)입니다.
그 CSS 속성은 당신이 필요로 하는 전부입니다. 나에겐 효과가 있습니다.Chrome에서 미리 보기를 할 때 BW와 Color(색: 옵션 - 색상 또는 흑백)를 볼 수 있는 옵션이 있으므로, 해당 옵션이 없다면 이 Chrome 확장 기능을 사용하여 보다 편리하게 사용할 것을 제안합니다.
fiddle에 추가한 사이트는 미디어 프린트 CSS에 필요합니다(추가하기만 하면 됩니다)
본문의 미디어 인쇄 CSS:
@media print {
body {-webkit-print-color-adjust: exact;}
}
업데이트 OK(확인)로 문제는 bootstrap(부트스트랩)입니다.css... 미디어 프린트 CSS가 있고 사용자도 마찬가지입니다.그걸 제거하면 색깔이 나올 겁니다...당신이 직접 하거나 부트스트랩 프린트 CSS를 고수해야 합니다.
인쇄를 클릭하면 색상이 표시됩니다.http://jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/
배경 그래픽 설정이 꺼져 있으면 크롬에서 배경색이나 다른 여러 스타일을 인쇄할 때 렌더링하지 않습니다.
이것은 CSS, @media, 또는 특정성과는 아무런 관련이 없습니다.아마도 해킹을 통해 배경색과 기타 그래픽을 표시할 수 있지만 크롬을 사용하여 배경색과 기타 그래픽을 표시하는 가장 쉬운 방법은 추가 설정에서 이 확인란을 적절하게 선택하는 것입니다.
저는 단지 추가할 필요가 있었습니다.!important백그라운드-컬러 태그에 속성을 부여하여 표시할 수 있습니다. 웹킷 부분이 필요하지 않았습니다.
background-color: #f5f5f5 !important;
CSS는 다음과 같습니다.
@media print {
body {
-webkit-print-color-adjust: exact;
}
}
.vendorListHeading th {
background-color: #1a4567 !important;
color: white !important;
}
부츠트랩을 사용하는 사람들을 위해.CSS, 이게 해결책입니다!
모든 해결책을 시도해봤는데 효과가 없었어요...부트스트랩.css가 엄청 짜증났다는 걸 알게 될 때까지@media print모든 색, 배경, colors, 그림자 등을 재설정할 수 있습니다
@media print{*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important}
따라서 bootstrap.css(또는 bootstrap.min.css)에서 이 섹션을 제거합니다.
또는 인쇄할 페이지의 CSS에서 이러한 값을 재정의합니다.@media print
@media print {
body {
-webkit-print-color-adjust: exact;
}
.customClass{
//customCss + !important;
}
//more of your custom css
}
IE의 경우
IE를 사용하는 경우 인쇄 미리 보기로 이동하고(문서 오른쪽 클릭 -> 인쇄 미리 보기), 설정으로 이동하고 "배경색 및 이미지 인쇄" 옵션이 있는 경우 해당 옵션을 선택한 후 시도합니다.
부트스트랩이나 다른 타사 CSS를 사용하는 경우에는 미디어 화면에만 미디어 화면을 지정하여 자체 CSS 파일에서 인쇄 미디어 유형을 제어할 수 있도록 해야 합니다.
<link rel="stylesheet" media="screen" href="">부트스트랩을 사용하는 경우.이 코드를 사용자 지정 CSS 파일에 사용합니다.부트스트랩은 인쇄 미리보기에서 모든 색상을 제거합니다.
@media print{
.box-text {
font-size: 27px !important;
color: blue !important;
-webkit-print-color-adjust: exact !important;
}
}
이것이 CSS 문제인 것이 확실합니까?이 문제와 관련하여 Google에 http://productforums.google.com/forum/ #!category-topic/chrome/discuss-chrome/eMlLBCKqd2s라는 게시물이 있습니다.
인쇄 과정과 관련이 있을 수 있습니다.웹킷이기도 한 사파리에서는 프린터 대화상자에서 배경 이미지와 색상을 인쇄할 수 있는 확인란이 있습니다.
다음을 사용합니다.@media print스타일시트
h1 {
background-color:#404040;
background-image:url("img/404040.png");
background-repeat:repeat;
box-shadow: inset 0 0 0 1000px #404040;
border:30px solid #404040;
height:0;
width:100%;
color:#FFFFFF !important;
margin:0 -20px;
line-height:0px;
}
다음은 몇 가지 유의 사항입니다.
- 배경색은 절대적인 단점이며 대부분 후세를 위해 존재합니다.
- background-image는 PNG로 만들어진 #404040의 1px1px픽셀을 사용합니다. 만약 사용자가 이미지를 활성화했다면, 그렇지 않다면...
- 상자 그림자를 설정하고 그게 안 되면...
- 테두리 = 원하는 높이 및/또는 상자 너비, 단색, 색상의 1/2.위의 예에서 나는 60px 높이의 박스를 원합니다.
- 테두리 특성에서 제어하는 내용에 따라 높이/폭을 0으로 조정합니다.
- !important를 사용하지 않으면 글꼴 색이 기본적으로 검은색으로 바뀝니다.
- 실제 치수가 없는 상자에 대해 고정하려면 선 높이를 0으로 설정합니다.
- 자신만의 PNG를 만들어 진행하기 :-)
- 블록의 텍스트를 래핑해야 하는 경우 디브에 넣고 디브 위치:상대적인 위치를 사용하여 디브 위치를 지정하고 선 높이를 제거합니다.
좀 더 자세한 시연은 제 바이올린을 보세요.
여기(그리고 다른 많은 질문에서) 제안된 모든 해결책을 시도했습니다. 예를 들어, 적용된 것과 같이background-color: #000 !important;스타일시트와 인라인 모두 또는 세트
@media print {
* {
color-adjust: exact !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
}
, 그것들을 합치기도 했지만 아무것도 효과가 없었습니다.
아무런 결과 없이 몇 시간 동안 조사한 결과, 저는 "버그"의 배경색 손실이 테이블(th, td)에만 나타나지만 다른 HTML 요소(div,...)나 다른 CSS 속성(경계색,...)은 여전히 작동한다는 것을 알았습니다.
그래서 저는 안에 있는 것들을 정리하는 "핵"을 생각해 냈습니다.<th>아니면<td>와 함께<div>(이전과 동일하게 표시되도록 패딩을 조정할 수 있습니다.)
여기서 리액트와.makeStyles의@material-ui/core.
JSX:
<Table bordered>
<thead className={classes.thead}>
<tr>
<th><div>Col 1</div></th>
<th><div>Col 2</div></th>
<th><div>Col 3</div></th>
</tr>
</thead>
<tbody>
<tr>
<td className={classes.tdGreen}><div>Row 1 - Col 1</div></td>
<td><div>Row 1 - Col 2</div></td>
<td><div>Row 1 - Col 3</div></td>
</tr>
<tr>
<td><div>Row 2 - Col 1</div></td>
<td className={classes.tdBlue}><div>Row 2 - Col 2</div></td>
<td><div>Row 2 - Col 3</div></td>
</tr>
</tbody>
</Table>
스타일:
const useStyles = makeStyles(() => ({
thead: {
textAlign: 'center',
'& th:not(:last-child)': {
padding: '0',
'& > div': {
padding: '.75rem',
backgroundColor: '#D8D8D8 !important',
}
}
},
tdGreen: {
padding: '0 !important',
'& > div': {
padding: '.75rem',
color: 'white',
backgroundColor: 'green !important',
}
},
tdBlue: {
padding: '0 !important',
'& > div': {
padding: '.75rem',
color: 'white',
backgroundColor: 'blue !important',
}
}
}));
아이디어를 가지고 순수 HTML/CSS 솔루션으로 변환할 수 있습니다.
이것이 이 문제로 어려움을 겪고 있는 사람들에게 도움이 되기를 바랍니다!
@media print{*,:fter,:before..} 색상 및 배경 스타일에 !important 레이블을 지정하여 요소의 배경 색상을 제거합니다.그 두 개의 css를 죽이면 효과가 있을 겁니다.
부트스트랩은 인쇄물에 어떠한 배경색도 있어서는 안 된다는 실행 결정을 내리는 것이므로 CSS를 편집하거나 더 높은 우선 순위인 다른 !중요한 스타일을 가져야 합니다.잘 했어요 부트스트랩...
연옥 101의 답변을 사용했지만 모든 색상(아이콘, 배경, 텍스트 색상 등)을 유지하는 데 문제가 있었습니다. 특히 CSS 스타일시트는 DOM 요소의 색상을 동적으로 변경하는 라이브러리와 함께 사용할 수 없습니다.따라서 요소의 스타일을 변경하는 스크립트가 있습니다 (background-colour그리고.colour)을 인쇄하기 전에, 인쇄가 완료되면 스타일을 지웁니다.CSS를 많이 쓰지 않는 것이 유용합니다.@media print스타일시트는 페이지 구조에 상관없이 작동합니다.
스크립트에는 FontA 일부 아이콘의 색상을 유지하도록 특별히 제작된 부분이 있습니다(또는 A를 사용하는 모든 요소).:before컬러 컨텐츠를 삽입할 셀렉터).
호환성: Chrome에서 작동하며 다른 브라우저는 테스트하지 않았습니다.
function setColors(selector) {
var elements = $(selector);
for (var i = 0; i < elements.length; i++) {
var eltBackground = $(elements[i]).css('background-color');
var eltColor = $(elements[i]).css('color');
var elementStyle = elements[i].style;
if (eltBackground) {
elementStyle.oldBackgroundColor = {
value: elementStyle.backgroundColor,
importance: elementStyle.getPropertyPriority('background-color'),
};
elementStyle.setProperty('background-color', eltBackground, 'important');
}
if (eltColor) {
elementStyle.oldColor = {
value: elementStyle.color,
importance: elementStyle.getPropertyPriority('color'),
};
elementStyle.setProperty('color', eltColor, 'important');
}
}
}
function resetColors(selector) {
var elements = $(selector);
for (var i = 0; i < elements.length; i++) {
var elementStyle = elements[i].style;
if (elementStyle.oldBackgroundColor) {
elementStyle.setProperty('background-color', elementStyle.oldBackgroundColor.value, elementStyle.oldBackgroundColor.importance);
delete elementStyle.oldBackgroundColor;
} else {
elementStyle.setProperty('background-color', '', '');
}
if (elementStyle.oldColor) {
elementStyle.setProperty('color', elementStyle.oldColor.value, elementStyle.oldColor.importance);
delete elementStyle.oldColor;
} else {
elementStyle.setProperty('color', '', '');
}
}
}
function setIconColors(icons) {
var css = '';
$(icons).each(function (k, elt) {
var selector = $(elt)
.parents()
.map(function () { return this.tagName; })
.get()
.reverse()
.concat([this.nodeName])
.join('>');
var id = $(elt).attr('id');
if (id) {
selector += '#' + id;
}
var classNames = $(elt).attr('class');
if (classNames) {
selector += '.' + $.trim(classNames).replace(/\s/gi, '.');
}
css += selector + ':before { color: ' + $(elt).css('color') + ' !important; }';
});
$('head').append('<style id="print-icons-style">' + css + '</style>');
}
function resetIconColors() {
$('#print-icons-style').remove();
}
그리고 수정합니다.window.print인쇄하기 전에 스타일을 설정하고 이후에 재설정할 수 있도록 기능합니다.
window._originalPrint = window.print;
window.print = function() {
setColors('body *');
setIconColors('body .fa');
window._originalPrint();
setTimeout(function () {
resetColors('body *');
resetIconColors();
}, 100);
}
요소 이전에 CSS를 생성할 아이콘 경로를 찾는 부분은 이 SO 답변의 복사본입니다.
사용할 수도 있습니다.box-shadow소유물.
부트스트랩을 사용하는 경우 가장 좋은 해결책은 @media print {} 이 안의 모든 코드를 제거하고 인쇄 미리 보기를 수행하는 동안 더 많은 설정에서 배경 그래픽을 활성화하는 것입니다.
!important와 함께 인라인 CSS 스타일을 사용할 수 있습니다.예.
<p style="background:red!important">ABCD</p>
nextjs를 사용하거나 대응하는 경우 이를 글로벌 CSS에 추가합니다.
@media print {
body {
-webkit-print-color-adjust: exact;
}
}
저는 이게 통했어요.
부트스트랩 웹에서 부트스트랩 4 cs를 다운받아서 코드가 어디에 있는지 하단 코드 룩을 볼 수 있습니다.
그리고 이 css 스타일을 제거합니다. 왜냐하면 이것은 당신의 css 컬러 테이블 스타일을 재정의하기 때문입니다.
해라
background: linear-gradient(#1a4567 , #1a4567)
저는 이게 통했어요.
"미디어 스타일 인쇄" 옵션 없이 부트스트랩을 다운로드하는 경우, 이 문제가 발생하지 않으며 bootstrap.css 파일에서 "@media print" 코드를 수동으로 제거할 필요가 없습니다.
외부 CSS 소스 파일을 이중으로 로드하고 media="screen"을 media="print"로 변경하면 테이블의 모든 테두리가 표시됩니다.
시도해 보기:
<link rel="stylesheet" media="print" href="bootstrap.css" />
<link rel="stylesheet" media="screen" href="bootstrap.css" />
언급URL : https://stackoverflow.com/questions/14987496/background-color-not-showing-in-print-preview
'sourcecode' 카테고리의 다른 글
| 종료하지 않고 PowerShell 세션 새로 고침/다시 시작 (0) | 2023.10.21 |
|---|---|
| mariadb - 테이블 XXX가 엔진에 없습니다. (0) | 2023.10.21 |
| wc_get_products()의 결과를 json 인코딩할 수 없습니다. (0) | 2023.10.21 |
| SHA256으로 문자열 해시 (0) | 2023.10.21 |
| 부트스트랩-선택 - 변경 시 이벤트를 발생시키는 방법 (0) | 2023.10.21 |