CSS @media ปัญหาการพิมพ์ด้วยสีพื้นหลัง;

176

ฉันใหม่ที่นี่ที่ บริษัท นี้และเรามีผลิตภัณฑ์ที่ใช้ไมล์ css ฉันพยายามที่จะทำให้สไตล์พิมพ์สำหรับ app ของเรา แต่ฉันมีปัญหาเกี่ยวกับใน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ô

สิ่งนี้ไม่ควรเป็นปัญหาอีกต่อไป ฉันมาที่ปัญหานี้เพราะฉันมีหน้า bootstrap และ bootstrap มี@media printข้อความค้นหาที่ลบสีพื้นหลังออกจากตาราง (เช่นแถบ)

— Martin Thoma

@MartinThoma คุณแก้ไขปัญหาได้อย่างไร คุณลบ CSS ออกจาก boostrap templated หรือไม่

— EduLopez

242

หากผู้ใช้ปิดการใช้งาน "สีและภาพพื้นหลังพิมพ์" ในการตั้งค่าการพิมพ์ของพวกเขา CSS จะไม่แทนที่สิ่งนั้นดังนั้นควรคำนึงถึงสิ่งนั้นเสมอ นี้เป็นค่าเริ่มต้น

เมื่อตั้งค่าแล้วมันจะพิมพ์สีพื้นหลังและรูปภาพสิ่งที่คุณมีจะใช้งานได้

มันถูกพบในจุดต่าง ๆ ใน IE9beta พบได้ในพิมพ์ -> ตัวเลือกหน้าภายใต้ตัวเลือกกระดาษ

ใน FireFox อยู่ในการตั้งค่าหน้ากระดาษ -> แท็บ [รูปแบบและตัวเลือก] ภายใต้ตัวเลือก

— Ryan Ternier
แหล่งที่มา

10

เยี่ยมมากคุณช่วยฉันประหยัดเวลาในการฝึกสมองกับ CSS นี้

— Weston Watson

162

ด้วย Chrome และ Safari คุณสามารถเพิ่มสไตล์ css "-webkit-print-color-adjustment: แน่นอน" ไปที่องค์ประกอบเพื่อบังคับให้พิมพ์สีพื้นหลังและ / หรือรูปภาพ

— Marco Bettiolo

11

@MarcoBettiolo ดูเหมือนจะไม่ทำงานบน webkit builds ล่าสุด! อย่างไรก็ตามสำคัญไม่

— Hedde van der 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

ตัวเลือกใน firefox และ IE คืออะไร

— Shan Khan

5

หมายเหตุสำหรับนักเดินทางข้ามเวลาในอนาคต: คุณอาจต้องการใช้color-adjustแทน

— КонстантинВан

@ КонстантинВан Chrome ไม่ได้รับการสนับสนุนในเดือนเมษายน 2019 นี่เป็นเอกสารของ firefox

— โทมัส

83

เข้าใจแล้ว:

CSS:

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

ใช้งานได้กับกล่องทั้งหมด - รวมถึงเซลล์ตาราง !!!

(หากเชื่อว่าไฟล์เอาต์พุตเครื่องพิมพ์ PDF ต้อง .. ?)
ทดสอบเฉพาะใน Chrome + Firefox บน Ubuntu ...

— T4NK3R
แหล่งที่มา

5

คุณสามารถเพิ่มการรองรับ IE8 และ IE9 ได้

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fffada', endColorstr='#fffada')"; /* IE8 */

หากคุณต้องการให้แสดงภาพสไปรท์ของคุณให้ใช้เทคนิค img / clip css-tricks.com/css-sprites-with-inline-imagesซึ่งจะให้ภาพใน IE9 และ FF ( แม้ว่า IE8 จะไม่ใช่)

— emik

2

ใช้งานได้ดีในเบราว์เซอร์ปกติ แต่ไม่ได้อยู่ใน IE แม้จะมีข้อเสนอแนะจาก @evami

— woz

@woz ฉันได้ทำงานในโครงการที่มี IE8 / 9 การไล่ระดับสี (เช่นเดียวกับกล่องเงา) เพิ่มองค์ประกอบพื้นหลังพิเศษที่ไม่ได้ถูกกำจัดโดยการบังคับเบราว์เซอร์รีเซ็ต คุณต้องการแบ่งปัน CSS ของคุณหรือไม่

— emik

2

ดูเหมือนจะไม่ทำงานกับ Chrome ล่าสุด (60)

— swervo

1

สิ่งนี้ล้มเหลวสำหรับฉันใน Chrome ฉันใช้ 69 นั่นแสดงให้เห็นว่ามันเสียอย่างน้อยตั้งแต่ 60 (ตามความคิดเห็นของ @ swervo)

— iconoclast

34

ลองใช้งานได้ผลกับฉันใน Google Chrome:

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

— Maxe
แหล่งที่มา

22

-webkit-print-color-adjust: exact; เพียงอย่างเดียวis Not enough คุณต้องใช้!importantกับแอตทริบิวต์

นี้จะพิมพ์ตัวอย่างบนโครเมี่ยมหลังจากที่ผมเพิ่ม!importantให้กับแต่ละbackground-colorและcolorattrubute ในแต่ละแท็ก

และนี่คือตัวอย่างก่อนพิมพ์บน Chrome ก่อนที่จะเพิ่ม!important

ตอนนี้เพื่อทราบวิธีการinject !importantสไตล์ของ div ให้ตรวจสอบคำตอบนี้ฉันไม่สามารถฉีดสไตล์ด้วยกฎ“! สำคัญ”

— Basheer AL-MOMANI
แหล่งที่มา

อาจเป็นเพราะคุณมี @ สไตล์ชีทที่รีเซ็ตสีพื้นหลังแล้ว

— Niccolo M.

พระเจ้าช่วย! มันใช้งานได้ แต่มันทำงานอย่างไร? คุณช่วยอธิบายได้ไหม

— rahim.nagori

1

นั่นเป็นทางออกเดียวที่ได้ผลสำหรับฉันจนถึงตอนนี้ <div style = "- webkit-print-color-adjust: แน่นอน! important; background-color: red! important;"> ... </div>

— โทมัส

10

โซลูชันสองอย่างที่ใช้งานได้ (อย่างน้อย Chrome ที่ทันสมัย - ยังไม่ได้ทดสอบเลย):

สำคัญอย่างยิ่งในการประกาศ css ปกติ (ไม่ได้อยู่ในการพิมพ์ @media)
ใช้ svg

— yar1
แหล่งที่มา

6

สำคัญแก้ปัญหาในทุกเบราว์เซอร์สมัยใหม่ตราบใดที่ "เปิดใช้งาน" สีพื้นหลังพิมพ์และรูปภาพ "

— Chris Hynes

2

! สำคัญยังทำงานได้โดยไม่ต้องมีการแทรกแซงจากผู้ใช้ถ้าคุณใช้ร่วมกับเนื้อหา {-webkit-print-color-adjustment: แน่นอน; } (ตามความคิดเห็นด้านบน)

— yar1

2

ฉันได้พบว่าถ้าฉันใช้color-adjustหรือตัวแปร webkit ฉันไม่ได้ต้องการกฎที่สำคัญ

— Kasapo

7

หากคุณต้องการสร้างหน้า "เหมาะสำหรับพิมพ์" ฉันขอแนะนำให้เพิ่ม "! important" ใน @media print CSS สิ่งนี้สนับสนุนให้เบราว์เซอร์ส่วนใหญ่พิมพ์รูปภาพพื้นหลังสีและอื่น ๆ

ตัวอย่าง:

background:#3F6CAF url('example.png') no-repeat top left !important;
background-color: #3F6CAF !important;

— ถั่ว-N-เบียร์
แหล่งที่มา

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

— The Aelfinn
แหล่งที่มา

หลังจากการค้นหาหลายชั่วโมงฉันพบคำตอบนี้ ฉันเข้าไปข้างในและกำจัดบรรทัดจาก Bootstrap.css และ WHAM! สีในพื้นหลังที่พิมพ์ได้!

— Ferengi อันยิ่งใหญ่

1

ขอบคุณ! สุดท้ายนี้คือคำตอบที่ทำให้ฉันพร้อมใช้งาน แต่ฉันต้องการเพิ่ม: body {-webkit-print-color-adjust: แน่นอน! }

— Ocean Airdrop

3

พบปัญหานี้เนื่องจากฉันมีปัญหาที่คล้ายกันเมื่อพยายามสร้าง PDF จากเอาต์พุต html ใน Google Apps Script ที่พื้นหลังสียังไม่ "พิมพ์"

-webkit-print-color-adjust:exact;และ!importantการแก้ปัญหาของหลักสูตรไม่ได้ทำงาน แต่box-shadow: inset 0 0 0 1000px gold;ไม่ ... สับดีขอบคุณมาก :)

— logol
แหล่งที่มา

2

คิดว่าฉันจะเพิ่มความช่วยเหลือล่าสุดและความช่วยเหลือที่เกี่ยวข้องจากประสบการณ์การพิมพ์ css ล่าสุด

สามารถพิมพ์พื้นหลังและสีโดยไม่คำนึงถึงการตั้งค่ากล่องโต้ตอบการพิมพ์

ในการทำเช่นนี้ฉันต้องใช้การผสมผสานของ! important & -webkit- print-color-adjustment: แน่นอน! สำคัญเพื่อให้ได้พื้นหลังและสีเพื่อพิมพ์อย่างถูกต้อง

นอกจากนี้เมื่อประกาศสีผมพบว่าพื้นที่ที่ดื้อที่สุดต้องการคำจำกัดความโดยตรงไปยังเป้าหมายของคุณ ตัวอย่างเช่น:

<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

ผ่านการทดสอบและทำงานกับ Chrome, Firefox, Opera และ Edge ภายในปี 2016/10 ควรทำงานกับเบราว์เซอร์ใด ๆ และควรดูตามที่คาดไว้เสมอ

ตกลงฉันทำการทดลองข้ามเบราว์เซอร์เล็กน้อยสำหรับการพิมพ์สีพื้นหลัง เพียงแค่คัดลอกวางและสนุก!

นี่คือหน้า HTML ที่พิมพ์ได้เต็มรูปแบบสำหรับ bootstrap:

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

— Heroselohim
แหล่งที่มา

1

"ทางออก" ที่ดีที่สุดที่ฉันพบคือให้ปุ่มหรือลิงก์ "พิมพ์" ที่เด่นชัดซึ่งปรากฏขึ้นในกล่องโต้ตอบขนาดเล็กที่อธิบายอย่างกล้าหาญสั้นและกระชับว่าพวกเขาจำเป็นต้องปรับการตั้งค่าเครื่องพิมพ์ (ด้วยคำสั่ง ABC 123 สัญลักษณ์แสดงหัวข้อย่อย) และการพิมพ์ภาพ นี่ประสบความสำเร็จมากสำหรับฉัน

— Alano
แหล่งที่มา

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

คุณสามารถใช้แท็กcanvasและ "วาด" พื้นหลังซึ่งทำงานบน IE9, Gecko และ Webkit

— Thomas Lecavelier
แหล่งที่มา

0

หากคุณไม่รังเกียจการใช้ภาพแทนสีพื้นหลัง (หรืออาจเป็นภาพที่มีสีพื้นหลังของคุณ) วิธีแก้ปัญหาด้านล่างนี้ใช้งานได้กับฉันใน FireFox, Chrome และแม้แต่ IE โดยไม่ต้องใช้งานมากเกินไป ตั้งภาพไว้ที่ใดที่หนึ่งบนหน้ากระดาษและซ่อนไว้จนกว่าผู้ใช้จะพิมพ์

html บนหน้าพร้อมภาพพื้นหลัง

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

The 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;
    }

}

— ksealey
แหล่งที่มา

ฉันใช้แนวทางของคุณและพยายามทำให้มันทำงานบน IE11 แต่น่าเศร้าที่มันไม่ทำงาน นั่นคือจนกว่าฉันจะใส่!importantค่าในแต่ละคุณสมบัติในชั้นเรียนของฉันซึ่งจากนั้นก็ให้มันทำงาน

— Sal Alturaigi

0

ไม่ได้ตั้งค่าbackground-colorภายในสไตล์ชีตพิมพ์ เพียงตั้งค่าแอตทริบิวต์ในไฟล์ css ปกติและใช้งานได้ดี :)

ชำระเงินตัวอย่างนี้: สุดยอดเทมเพลต HTML พิมพ์พร้อมหัวกระดาษและท้ายกระดาษ

การสาธิต: เทมเพลต HTML การพิมพ์ขั้นสูงพร้อมการสาธิตหัวกระดาษและท้ายกระดาษ

— ดรายวิลเลียมส์
แหล่งที่มา

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

— Vasily Ivanov
แหล่งที่มา