ฉันจะบังคับให้เบราว์เซอร์พิมพ์ภาพพื้นหลังใน CSS ได้อย่างไร

คำถามนี้เคยถามมาก่อนแต่วิธีแก้ปัญหาใช้ไม่ได้ในกรณีของฉัน ฉันต้องการตรวจสอบให้แน่ใจว่ามีการพิมพ์ภาพพื้นหลังบางภาพเนื่องจากเป็นส่วนหนึ่งของหน้า (ไม่ใช่รูปภาพโดยตรงในหน้าเว็บเนื่องจากมีหลายภาพที่ใช้เป็น CSS Sprite)

วิธีแก้ปัญหาอื่นสำหรับคำถามเดียวกันนี้แนะนำให้ใช้list-style-imageซึ่งใช้ได้เฉพาะเมื่อคุณมีรูปภาพที่แตกต่างกันสำหรับทุกไอคอนเท่านั้นไม่สามารถใช้ CSS Sprite ได้

นอกเหนือจากการสร้างเพจแยกโดยมีไอคอนแบบอินไลน์แล้วยังมีวิธีอื่นอีกหรือไม่?

คุณควบคุมวิธีการพิมพ์ของเบราว์เซอร์ได้น้อยมาก คุณสามารถ SUGGEST ได้มากที่สุด แต่ถ้าการตั้งค่าการพิมพ์ของเบราว์เซอร์มี "ไม่พิมพ์ภาพพื้นหลัง" คุณจะไม่สามารถทำอะไรได้เลยโดยไม่ต้องเขียนหน้าเว็บใหม่เพื่อเปลี่ยนภาพพื้นหลังให้เป็นภาพ "เบื้องหน้า" แบบลอยตัวซึ่งอยู่เบื้องหลังเนื้อหาอื่น ๆ

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

โดยค่าเริ่มต้นเบราว์เซอร์จะมีตัวเลือกในการพิมพ์สีพื้นหลังและภาพปิดอยู่ คุณสามารถเพิ่มบางบรรทัดใน CSS เพื่อข้ามสิ่งนี้ได้ เพียงเพิ่ม:

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

ฉันพบวิธีพิมพ์ภาพพื้นหลังด้วย CSS มันขึ้นอยู่กับการจัดวางภูมิหลังของคุณเล็กน้อย แต่ดูเหมือนว่าจะใช้ได้กับแอปพลิเคชันของฉัน

โดยพื้นฐานแล้วคุณเพิ่มส่วน@media printท้ายของสไตล์ชีตและเปลี่ยนพื้นหลังของร่างกายเล็กน้อย

ตัวอย่างหาก CSS ปัจจุบันของคุณมีลักษณะดังนี้:

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

ในตอนท้ายของสไตล์ชีตคุณเพิ่ม:

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

เป็นการเพิ่มภาพให้ร่างกายเป็นภาพ "เบื้องหน้า" จึงทำให้พิมพ์ได้ คุณอาจต้องเพิ่ม CSS เพิ่มเติมเพื่อให้z-indexเหมาะสม แต่อีกครั้งขึ้นอยู่กับวิธีการจัดวางหน้าเว็บของคุณ

สิ่งนี้ใช้ได้ผลสำหรับฉันเมื่อฉันไม่สามารถรับภาพส่วนหัวเพื่อแสดงในมุมมองการพิมพ์

รหัสด้านล่างใช้ได้ดีสำหรับฉัน (อย่างน้อยสำหรับ 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;
}

เช่นเดียวกับที่ @ ckpepper02 กล่าวว่าเนื้อหาเนื้อหา: ตัวเลือก url ทำงานได้ดี อย่างไรก็ตามฉันพบว่าหากคุณแก้ไขเล็กน้อยคุณสามารถใช้มันเพื่อเพิ่มภาพส่วนหัวประเภทต่างๆโดยใช้องค์ประกอบ: before pseudo ดังต่อไปนี้

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

ซึ่งจะทำให้ภาพอยู่ด้านบนของหน้าและจากการทดสอบแบบ จำกัด ของฉันมันใช้งานได้ใน Chrome และ IE9

-hanz

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

ข้อเสียเปรียบประการหนึ่งคือเพื่อให้สามารถใช้งานได้ใน Chrome คุณต้องระบุลักษณะการทำงานนี้นอกข้อความค้นหาสื่อสิ่งพิมพ์ของคุณจากนั้นจึงทำให้สามารถมองเห็นได้ในบล็อกข้อความค้นหาสื่อสิ่งพิมพ์ อะไรทำนองนี้ ...

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

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

ข้อเสียคือมักจะดาวน์โหลดรูปภาพในการโหลดหน้าเว็บปกติโดยเพิ่มจำนวนมากโดยไม่จำเป็น คุณสามารถหลีกเลี่ยงสิ่งนั้นได้โดยใช้รูปภาพ / เส้นทางเดียวกันกับที่คุณใช้สำหรับรูปภาพต้นฉบับที่มองเห็นได้

มันใช้งานได้ใน Google Chrome เมื่อคุณเพิ่ม! แอตทริบิวต์ที่สำคัญในภาพพื้นหลังตรวจสอบให้แน่ใจว่าคุณได้เพิ่มแอตทริบิวต์ก่อนแล้วลองอีกครั้งคุณสามารถทำได้เช่นนั้น

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

}

คุณสามารถใช้เส้นขอบสำหรับสีคงที่

 borderTop: solid 15px black;

และสำหรับพื้นหลังไล่ระดับสีคุณสามารถใช้:

    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เสนอวิธีแก้ปัญหาที่สวยงามโดยใช้สัญลักษณ์แสดงหัวข้อย่อยที่กำหนดเองแทนภาพพื้นหลัง:

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

โดยรวมสิ่งนี้ไว้ในไฟล์

@media print {
}

บล็อกฉันสามารถแทนที่โลโก้สีขาวบนหน้าจอได้โดยแสดงเป็นภาพพื้นหลังพร้อมโลโก้สีดำบนโปร่งใสสำหรับการพิมพ์

คุณสามารถใช้เทคนิคบางอย่างเช่นนี้:

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

ในแท็กร่างกาย:

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