সিএসএস @ মিডিয়া প্রিন্ট ইস্যুগুলি পটভূমির রঙ সহ;

Question

আমি এখানে এই সংস্থায় নতুন এবং আমাদের একটি পণ্য রয়েছে যা মাইলের 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তবে প্রিন্টের মধ্যে আসতে পারি না। এখন আমি বুঝতে পেরেছি যে আপনারা আরও বিশদ ছাড়াই আমার প্রশ্নের উত্তর দিতে পারবেন না। কারও কাছে এই সমস্যাটি বা এর আগে কিছু ছিল তবে আমি কেবল কৌতূহলী ছিলাম।

Comments

ওয়েল, এটি ডাব্লু 3 সি সিএসএস-ভ্যালিডেটর ( জিগ্যাস.ডব্লিউ 3.org/css- লাডিয়েটার ) পাস করে । এটি অদ্ভুত

— G:18Tô

এটি আর কোনও সমস্যা হওয়া উচিত নয়। আমি এই ইস্যুতে এসেছি কারণ আমার একটি বুটস্ট্র্যাপ পৃষ্ঠা ছিল এবং বুটস্ট্র্যাপে এমন একটি @media printকোয়েরি রয়েছে যা টেবিলগুলি (যেমন স্ট্রাইপগুলি) থেকে পটভূমির রঙগুলি সরিয়ে দেয়।

— মার্টিন থোমা

@ মার্টিনথোমা আপনি কীভাবে সমস্যাটি সমাধান করেছেন? আপনি বুস্ট্র্যাপ টেম্প্লেটেড থেকে সিএসএস সরিয়েছেন?

— এডু লোপেজ

Answer 1

যদি কোনও ব্যবহারকারীর মুদ্রণ সেটিংসে "প্রিন্ট ব্যাকগ্রাউন্ড রঙ এবং চিত্রগুলি" বন্ধ থাকে তবে কোনও সিএসএস এটিকে ওভাররাইড করতে পারে না, তাই সর্বদা তার জন্য অ্যাকাউন্ট করুন। এটি একটি ডিফল্ট সেটিংস ।

এটি সেট হয়ে যাওয়ার পরে এটি ব্যাকগ্রাউন্ডের রঙ এবং চিত্রগুলি মুদ্রণ করবে, আপনার যা আছে তা কাজ করবে।

এটি বিভিন্ন দাগে পাওয়া যায়। আইই 9 বিটাতে এটি পেপার বিকল্পগুলির অধীনে মুদ্রণ-> পৃষ্ঠা বিকল্পগুলিতে পাওয়া যায়

ফায়ারফক্সে এটি পৃষ্ঠা সেটআপ -> [ফর্ম্যাট ও বিকল্পসমূহ] বিকল্পগুলির অধীনে ট্যাব।

Comments

দুর্দান্ত, আপনি এই সিএসএসে আমার মস্তিষ্ককে সরিয়ে দেওয়ার কয়েক ঘন্টা বাঁচিয়েছেন।

— ওয়েস্টন ওয়াটসন

ক্রোম এবং সাফারি দিয়ে আপনি CSS স্টাইল যুক্ত করতে পারেন "-উইবকিট-প্রিন্ট-রঙ-সমন্বয়: সঠিক;" পটভূমির রঙ এবং / অথবা চিত্র মুদ্রণের জন্য উপাদানটিতে

— মার্কো বেটিওলো

@ মারকোবেটিওলো সর্বশেষতম ওয়েবকিট বিল্ডগুলিতে কাজ করছে বলে মনে হচ্ছে না, তবে তা গুরুত্বপূর্ণ!

— হেডে ভ্যান ডের হাইড

নিয়মে গুরুত্বপূর্ণ যোগ করা এটি আমার পক্ষেও সমাধান হয়ে গেছে।

— থিয়াগো ডুয়ার্টে

এটির প্রসারিত করার জন্য, আমি রঙ-সামঞ্জস্য করেছি: সঠিক; এফএফ কাজ করার জন্য। সুতরাং আমার পুরো কোডটি হল*{ color-adjust: exact; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

— বিটব্যাগ

Answer 2

Chrome এ পটভূমি মুদ্রণ সক্ষম করতে:

body {
  -webkit-print-color-adjust: exact !important;
}

Comments

এটি বিকল্প সারি রঙের সাথে একটি টেবিল মুদ্রণ করে আমার সমস্যার সমাধান করেছে বলে মনে হচ্ছে।

— ভিক্টর জে গার্সিয়া

নিশ্চিত হয়ে নিন যে আপনি নিজের চিত্রটিতে সঠিক কেসিং ব্যবহার করেছেন কারণ Chrome এর মুদ্রণ ডায়ালগটি প্রথম চেষ্টাটিতে চিত্রগুলি লোড করে না। আপনার ব্যাকগ্রাউন্ড-চিত্রের URL এর দৈহিক ফোল্ডারের নামের আবরণটি মিলে না এমন ইভেন্টে এটি ঘটে। (48.0.2564.109 সংস্করণে প্রতিবেদন করা হয়েছে)

— এমপল

ফায়ার ফক্স এবং আইই বিকল্প কি

— শান খান

ভবিষ্যতের ভ্রমণকারীদের জন্য একটি নোট: আপনি color-adjustপরিবর্তে এটি ব্যবহার করতে চাইতে পারেন ।

— 14 Ван

@ КонстантинВан এটি এপ্রিল 2019 পর্যন্ত Chrome এ সমর্থিত নয় This এটি ফায়ারফক্স ডকুমেন্টেশন।

— থমাস

Answer 3

বুঝেছি:

সিএসএস:

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

সমস্ত বাক্সের জন্য কাজ করে - টেবিল সেল সহ !!!

• (পিডিএফ-প্রিন্টার আউটপুট ফাইলটি যদি বিশ্বাস করা হয় ..?)
• কেবল উবুন্টুতে ক্রোম + ফায়ারফক্সে পরীক্ষা করা হয়েছে ...

Comments

আপনি আইই 8 এবং আইই9 সমর্থনটি যুক্ত -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fffada', endColorstr='#fffada')"; /* IE8 */ করতে পারেন যদি আপনি চান আপনার স্প্রিট চিত্রগুলি দৃশ্যমান হয় তবে img / ক্লিপ কৌশল css-tricks.com/css-sprites-with-inline- চিত্রগুলি ব্যবহার করুন , যা আপনাকে IE9 এবং এফএফতে চিত্র দেবে ( যদিও

— আইই 8

সাধারণ ব্রাউজারগুলিতে দুর্দান্ত কাজ করে তবে আইই তে নয়, এমনকি @ আইভামির পরামর্শ অনুসারে।

— ওয়াজ

@ ওউজ আমি আইই 8/9 সহ একটি প্রকল্পে এটি কাজ করছি। গ্রেডিয়েন্ট (ঠিক বাক্স-ছায়ার মতো) একটি অতিরিক্ত পটভূমি উপাদান যুক্ত করে যা জোর করে ব্রাউজার রিসেট দ্বারা নির্মূল করা হয় না। আপনি কি আপনার সিএসএস শেয়ার করতে আপত্তি করবেন?

— ইমিক 14

এটি সর্বশেষতম ক্রোম (60) এর সাথে কাজ করছে বলে মনে হচ্ছে না।

— স্বারভো

এটি ক্রোমে আমার জন্য ব্যর্থ। আমি using৯ টি ব্যবহার করছি That এটি প্রস্তাব দেয় যে এটি কমপক্ষে since০ সাল থেকে ভেঙে গেছে (@ স্বেরো মন্তব্য অনুসারে)।

— আইকনোক্লাস্ট

Answer 4

এটি চেষ্টা করে দেখুন, এটি আমার জন্য গুগল ক্রোমে কাজ করেছে:

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

Answer 5

-webkit-print-color-adjust: exact; একাis Not enough আপনি ব্যবহার করতে হবে!important গুনটির সাথে

এটি Chrome পূর্বরূপ মুদ্রণ করা হয় পরে আমি যোগ !importantপ্রতিটি background-colorএবং colorপ্রতিটি ট্যাগে attrubute

এবং এটি যোগ করার আগে ক্রোমের উপর পূর্বরূপ মুদ্রণ করছে!important

এখন, inject !importantডিভের স্টাইলটি কীভাবে করবেন তা জানতে, এই উত্তরটি দেখুন আমি একটি "গুরুত্বপূর্ণ" নিয়ম দিয়ে কোনও শৈলী ইনজেক্ট করতে পারছি না

Comments

কারণ এটি আপনার পটভূমির রঙ পুনরায় সেট করতে ইতিমধ্যে একটি @ প্রিন্ট স্টাইলশিট রয়েছে because

— নিককলো এম।

ঈশ্বর! এটি কাজ করছে কিন্তু এটি কীভাবে কাজ করছে? আপনি দয়া করে ব্যাখ্যা করতে পারেন।

— রহিম.নাগোরি

এটাই আমার একমাত্র সমাধান যা এখন পর্যন্ত আমার পক্ষে কাজ করেছে। <ডি স্টাইল = "- ওয়েবকিট-প্রিন্ট-রঙ-সমন্বয়: সঠিক! গুরুত্বপূর্ণ; পটভূমির রঙ: লাল! গুরুত্বপূর্ণ;"> ... </ ডিভি>

— টমাস

Answer 6

দুটি সমাধান যা কাজ করে (আধুনিক ক্রোমে অন্তত - এর বাইরে পরীক্ষা করা হয়নি):

1. নিয়মিত সিএসএস ঘোষণার কাজগুলিতে গুরুত্বপূর্ণ অধিকার (এমনকি @ মিডিয়া প্রিন্টেও নয়)
2. এসভিজি ব্যবহার করুন

Comments

যত তাড়াতাড়ি "প্রিন্ট ব্যাকগ্রাউন্ড কালার এবং ইমেজস" সক্ষম থাকে ততক্ষণ প্রতিটি আধুনিক ব্রাউজারে সমস্যাটি সমাধান করে।

— ক্রিস হেইন

! গুরুত্বপূর্ণ যদি আপনি এটি শরীরের সাথে একসাথে ব্যবহার করেন তবে ব্যবহারকারীর হস্তক্ষেপ ছাড়াই কাজ করে;-ওয়েবকিট-প্রিন্ট-রঙ-সমন্বয়: সঠিক; above (উপরের মতামত অনুসারে)

— yar1

আমি খুঁজে পেয়েছি যে আমি যদি ব্যবহার করি color-adjustবা ওয়েবকিট রূপটি আমার আসলে গুরুত্বপূর্ণ নিয়মের প্রয়োজন হয় না।

— কাসাপো

Answer 7

যদি আপনি "প্রিন্টার বান্ধব" পৃষ্ঠাগুলি তৈরি করতে চান তবে আমি আপনার @ মিডিয়া প্রিন্ট সিএসএসে "! গুরুত্বপূর্ণ" যুক্ত করার পরামর্শ দিচ্ছি। এটি বেশিরভাগ ব্রাউজারগুলিকে আপনার পটভূমি চিত্র, রঙ ইত্যাদি মুদ্রণ করতে উত্সাহ দেয়

উদাহরণ:

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

Answer 8

অন্য কৌতুক আপনি কি করতে পারেন ছাড়া মুদ্রণ সীমান্ত বিকল্প অন্যান্য পোস্ট উল্লেখিত সক্রিয়। যেহেতু সীমানা হয় মুদ্রিত আপনি এই হ্যাক সঙ্গে কঠিন পশ্চাদপট-রং সিমুলেট করতে পারেন:

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

যদিও এর ব্যাকগ্রাউন্ড-রঙগুলি দৃশ্যমান করতে কিছু অতিরিক্ত কোড এবং কিছু অতিরিক্ত যত্ন প্রয়োজন, এটি এখনও আমার কাছে একমাত্র সমাধান known

লক্ষ্য করুন এই হ্যাকটি এর বাইরে display: block;বা অন্য উপাদানগুলিতে কাজ করবে না display: table-cell;, উদাহরণস্বরূপ <table class="your-background">এবং<tr class="your-background"> কাজ করবে না।

আমরা এটি সমস্ত ব্রাউজারে পটভূমি রঙ পেতে (এখনও, আই 9 + প্রয়োজনীয়) পেতে ব্যবহার করি।

Comments

এটি একটি উন্মাদ হ্যাক, তবে এটি মুদ্রণ সেটিংস নির্বিশেষে পটভূমির রঙের কিছু ফর্ম জোর করে। উজ্জ্বল, ধন্যবাদ

— ব্র্যাড জ্যাচার

Answer 9

ক্রোমের জন্য, আমি এই জাতীয় কিছু ব্যবহার করেছি এবং এটি আমার জন্য কার্যকর হয়েছিল।

বডি ট্যাগের মধ্যে,

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

বা কোনও নির্দিষ্ট উপাদানের জন্য, বলুন যে আপনার কাছে টেবিল রয়েছে এবং আপনি একটি টিডি অর্থাৎ একটি ঘর পূরণ করতে চান,

<table><tr><td style="-webkit-print-color-adjust: exact;"></tr></table>

Answer 10

!importantব্যবহারটি সাধারণভাবে নষ্ট করা সত্ত্বেও , এটি আপত্তিজনক কোড bootstrap.cssযা টেবিল সারিগুলি মুদ্রণ করা থেকে বাধা দেয় background-color।

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

ধরে নেওয়া যাক আপনি নীচের এইচটিএমএল স্টাইল করার চেষ্টা করছেন:

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

এই সিএসএসকে ওভাররাইড করতে আপনার স্টাইলশিটে নিম্নলিখিত (আরও নির্দিষ্ট) নিয়মটি রাখুন:

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

এটি কাজ করে কারণ বুটস্ট্র্যাপের ডিফল্টের চেয়ে নিয়ম আরও নির্দিষ্ট।

Comments

কয়েক ঘন্টা অনুসন্ধানের পরেও আমি এই উত্তরটি পেয়েছি। আমি ভিতরে গিয়ে বুটস্ট্র্যাপ.এসএস এবং হ্যাম থেকে লাইনগুলি মুছে ফেলেছি! মুদ্রণযোগ্য পটভূমিতে রঙ!

— মাইটি ফেরেঙ্গি

ধন্যবাদ! অবশেষে, এটি আমার উত্তর দৌড়ে এসেছিল তবে আমার যুক্ত করা দরকার: বডি we-ওয়েবেকিট-প্রিন্ট-রঙ-সমন্বয়: সঠিক! গুরুত্বপূর্ণ; }

— ওশিয়ান এয়ারড্রপ

Answer 11

এই সমস্যাটি খুঁজে পেয়েছে, কারণ গুগল অ্যাপস স্ক্রিপ্টে এইচটিএমএল আউটপুট থেকে পিডিএফ তৈরি করার চেষ্টা করার সময় আমার একই সমস্যা হয়েছিল যেখানে ব্যাকগ্রাউন্ড-রঙগুলিও "মুদ্রিত" নয়।

-webkit-print-color-adjust:exact;এবং !importantঅবশ্যই সমাধান কাজ করে নি, কিন্তু box-shadow: inset 0 0 0 1000px gold;করেনি ... মহান হ্যাক, আপনাকে অনেক ধন্যবাদ :)

Answer 12

ভেবেছিলাম আমি একটি সাম্প্রতিক মুদ্রণ সিএসএস অভিজ্ঞতা থেকে সাম্প্রতিক এবং 2015 প্রাসঙ্গিক সহায়তা যুক্ত করব।

মুদ্রণ ডায়ালগ বক্স সেটিংস নির্বিশেষে ব্যাকগ্রাউন্ড এবং রঙ মুদ্রণ করতে সক্ষম ছিল।

এটি করার জন্য, আমাকে ! গুরুত্বপূর্ণ এবং -উইবকিট-প্রিন্ট-রঙ-সমন্বয়: সঠিক! পটভূমি এবং সঠিকভাবে মুদ্রণের জন্য রঙগুলি পাওয়া গুরুত্বপূর্ণ of

এছাড়াও, রঙ ঘোষণার সময়, আমি খুঁজে পেলাম সবচেয়ে জেদী অঞ্চলগুলির জন্য আপনার টার্গেটের জন্য একটি সংজ্ঞা প্রয়োজন। উদাহরণ স্বরূপ:

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

এবং আপনার সিএসএস:

.red {color:red !important}
.foo {color:red !important} /* <-- This won't always paint the p */

Answer 13

পরীক্ষিত এবং কাজ2016-10 সালের মধ্যে ক্রোম, ফায়ারফক্স, অপেরা এবং এজতে করছে। যে কোনও ব্রাউজারে কাজ করা উচিত এবং সর্বদা প্রত্যাশিত হওয়া উচিত।

ঠিক আছে, আমি ব্যাকগ্রাউন্ডের রঙগুলি মুদ্রণের জন্য একটি সামান্য ক্রস-ব্রাউজার পরীক্ষা করেছি। শুধু অনুলিপি করুন, আটকান এবং উপভোগ করুন!

এটি বুটস্ট্র্যাপের জন্য একটি সম্পূর্ণ মুদ্রণযোগ্য এইচটিএমএল পৃষ্ঠা:

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

Answer 14

আমি খুঁজে পেয়েছি সেরা "সমাধান" হ'ল একটি বিশিষ্ট "মুদ্রণ" বোতাম বা লিঙ্ক সরবরাহ করা যা একটি ছোট্ট সংলাপ বাক্সটিকে পপ আপ করবে যা সংক্ষিপ্তভাবে, সংক্ষিপ্তভাবে এবং সংক্ষিপ্তভাবে ব্যাখ্যা করতে হবে যে তাদের পটভূমি সক্ষম করতে প্রিন্টার সেটিংস (একটি এবিসি 123 বুলেট পয়েন্ট নির্দেশ সহ) সমন্বয় করতে হবে এবং ইমেজ প্রিন্টিং। এটি আমার পক্ষে খুব সফল হয়েছে।

Answer 15

কিছু ক্ষেত্রে (কোনও বিষয়বস্তুবিহীন ব্লক তবে পটভূমি সহ) প্রতিটি ব্লকের জন্য পৃথকভাবে সীমানা ব্যবহার করে ওভাররাইড করা যায়।

উদাহরণ স্বরূপ:

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

@media print {
  .colored div {
    border: 4px solid #000;
    width: 0;
    height: 0;
  }
}

Answer 16

আপনি ট্যাগটি ব্যবহার করতে পারেন canvasএবং পটভূমিটি "আঁকুন" করতে পারেন , যা আই 9, গেকো এবং ওয়েবকিট নিয়ে কাজ করে।

Answer 17

আপনি যদি পটভূমির রঙের পরিবর্তে কোনও চিত্র (বা সম্ভবত আপনার পটভূমির রঙের সাথে একটি চিত্র) ব্যবহার করতে আপত্তি করেন না তবে নীচের সমাধানটি আমার পক্ষে কোনও অতিরিক্ত ছাড়াই ছাড়াই ফায়ারফক্স, ক্রোম এবং আই আই তে কাজ করেছে। পৃষ্ঠার কোথাও চিত্রটি সেট করুন এবং ব্যবহারকারী প্রিন্ট না করা পর্যন্ত এটি আড়াল করুন।

পটভূমির চিত্র সহ পৃষ্ঠায় এইচটিএমএল

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

সিএসএস

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

}

Comments

আমি আপনার দৃষ্টিভঙ্গি নিয়েছি এবং এটি 1111 এ কাজ করার চেষ্টা করেছি, তবে দুঃখের বিষয় এটি কার্যকর হয়নি। এটি !importantআমার ক্লাসে প্রতিটি বৈশিষ্ট্যের জন্য একটি মান রাখি যতক্ষণ না পরে এটি কাজ করে।

— সাল Alturaigi

Answer 18

প্রিন্ট স্টাইলশিটের ভিতরে থাকা সেট করবেন নাbackground-color । সাধারণ সিএসএস ফাইলে কেবল অ্যাট্রিবিউটটি সেট করুন এবং এটি দুর্দান্ত কাজ করে :)

এই উদাহরণটি দেখুন: শিরোনাম এবং পাদচরণ সহ চূড়ান্ত প্রিন্ট এইচটিএমএল টেমপ্লেট

ডেমো: শিরোনাম এবং পাদচরণ ডেমো সহ আলটিমেট প্রিন্ট এইচটিএমএল টেমপ্লেট

Answer 19

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>

ক্রোম এবং এজ এ কাজ করে