পটভূমির রঙ মুদ্রণ পূর্বরূপে প্রদর্শিত হচ্ছে না


223

আমি একটি পৃষ্ঠা মুদ্রণের চেষ্টা করছি। সেই পৃষ্ঠাতে আমি একটি টেবিলকে একটি পটভূমির রঙ দিয়েছি। আমি যখন ক্রোমে মুদ্রণ পূর্বরূপ দেখি এটি ব্যাকগ্রাউন্ড রঙের সম্পত্তি গ্রহণ করে না ...

সুতরাং আমি এই সম্পত্তি চেষ্টা করেছিলাম:

-webkit-print-color-adjust: exact; 

কিন্তু এখনও এটি রঙ দেখাচ্ছে না।

http://jsfiddle.net/TbrtD/

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

1
দেখে মনে হচ্ছে এটি সঠিকভাবে কাজ করে: jsfiddle.net/tDggR/2 আমি ক্রোম সংস্করণ 25 ব্যবহার করছি
জেরেমি নিনস

jsfiddle.net/rajkumart08/TbrtD/1/ebded/results এখানে কাজ করছে না কেন

ভগবন্! এটি
জাভা

আমার উত্তর চেক আউট stackoverflow.com/a/40087869/4251431
বশীর আল MOMANI

উত্তর:


416

ক্রোম সিএসএস সম্পত্তি -webkit-print-color-adjust: exact;যথাযথভাবে কাজ করে।

তবে মুদ্রণের জন্য আপনার কাছে সঠিক সিএসএস রয়েছে তা নিশ্চিত করা প্রায়শই কৌশলযুক্ত হতে পারে। আপনার যে সমস্যাগুলি হচ্ছে তা এড়াতে বেশ কয়েকটি জিনিস করা যেতে পারে। প্রথমে আপনার সমস্ত মুদ্রণ সিএসএসকে আপনার স্ক্রিন সিএসএস থেকে আলাদা করুন। এই মাধ্যমে করা হয়@media print এবং এর@media screen

প্রায়শই বার অতিরিক্ত কিছু সেট আপ করা হয় @media print সিএসএস পর্যাপ্ত হয় না কারণ মুদ্রণের সময় আপনার অন্যান্য সমস্ত সিএসএস অন্তর্ভুক্ত থাকে। এই ক্ষেত্রে আপনার কেবল সিএসএসের সুনির্দিষ্টতা সম্পর্কে সচেতন হওয়া দরকার কারণ মুদ্রণ বিধিগুলি মুদ্রণবিহীন সিএসএস বিধিগুলির বিরুদ্ধে স্বয়ংক্রিয়ভাবে জিততে পারে না।

আপনার ক্ষেত্রে, -webkit-print-color-adjust: exactকাজ করছে। তবে, আপনারbackground-color এবং রঙিন সংজ্ঞাগুলি উচ্চতর নির্দিষ্টতার সাথে অন্য সিএসএস দ্বারা পরাজিত হচ্ছে।

যদিও আমি প্রায় কোনও পরিস্থিতিতে ব্যবহার করে সমর্থন করি না!important , নিম্নলিখিত সংজ্ঞাগুলি সঠিকভাবে কাজ করে এবং সমস্যাটি প্রকাশ করে:

@media print {
    tr.vendorListHeading {
        background-color: #1a4567 !important;
        -webkit-print-color-adjust: exact; 
    }
}

@media print {
    .vendorListHeading th {
        color: white !important;
    }
}

এখানে ফিডল (এবং মুদ্রণ প্রাকদর্শনের স্বাচ্ছন্দ্যের জন্য এম্বেড করা হয়েছে)।


Print preview failed.ফ্রিডলটি খোলার সময়, আমি ক্রোমে v47.0.2526.106
piotr_cz

মোজিলা যেমন অ-মানক এই হিসাবে চিহ্নিত করেছে, তাই ফলাফল অসঙ্গত হয় এবং উত্পাদন সাইট ব্যবহার করা উচিত নয় developer.mozilla.org/en-US/docs/Web/CSS/...
মাইক ইয়ং

হ্যাঁ, এটি ক্রোমে কাজ করে। বুটস্ট্র্যাপ সিএসএস প্রিন্ট মিডিয়া ব্যবহার করে এটি আমার জন্য ওভাররাইড করে। আপনি Chrome উপাদানসমূহ পরিদর্শকের নীচে রেন্ডারিং ট্যাবটি ব্যবহার করে মুদ্রণ মোডের পূর্বরূপ এবং পরীক্ষা করতে পারেন। আপনি ওভাররাইড স্ট্যাকটি দেখতে চাইলে এমুলেট সিএসএস মিডিয়াতে একটি বিকল্প রয়েছে।
করগালোর

ব্যাকগ্রাউন্ডে আমার সাথে গুরুত্বপূর্ণ!
কোডমারির

75

সিএসএস সম্পত্তিটি আপনার যা প্রয়োজন তা কেবল আমার জন্য কাজ করে ... ক্রোমে প্রাকদর্শন করার সময় আপনার কাছে এটি BW এবং রঙ দেখার বিকল্প রয়েছে ( রঙ: বিকল্পগুলি- রঙ বা কালো এবং সাদা ) দেখার বিকল্প রয়েছে তাই যদি আপনার কাছে সেই বিকল্প না থাকে, তবে আমি এই ক্রোম এক্সটেনশানটি দখল এবং আপনার জীবনকে আরও সহজ করার পরামর্শ দিচ্ছি:

https://chrome.google.com/webstore/detail/print-background-colors/gjecpgdgnlanljjdacjdeadjkocnnamk?hl=en

আপনি ফিডলগুলিতে যে সাইটটি যুক্ত করেছেন তা আপনার মিডিয়া প্রিন্ট সিএসএসে এটির প্রয়োজন (আপনার এটি ঠিক এটি যুক্ত করা দরকার ...

মিডিয়া মুদ্রণ শরীরে সিএসএস:

@media print {
body {-webkit-print-color-adjust: exact;}
}

আপডেট করুন ঠিক আছে তাই আপনার ইস্যুটি বুটস্ট্র্যাপ.এসএস ... এটির পাশাপাশি একটি মিডিয়া প্রিন্ট সিএসএস রয়েছে .... আপনি এটি মুছে ফেলেন এবং এটি আপনাকে রঙ দেয় .... বুটস্ট্র্যাপ প্রিন্ট সিএসএস।

আমি যখন এটিতে মুদ্রণ ক্লিক করি তখন আমি রঙটি দেখি ....


এক্সটেনশন সমস্ত পৃষ্ঠাগুলির জন্য কাজ করে তবে এটি আমার কোডের জন্য কাজ করে না কেন jsfiddle.net/rajkumart08/TbrtD/1/eded/result Defie.co/testing/twitter-bootstrap-558bc52/docs/exferences/…

1
যদি এটি হয় তবে আপনার বুটস্ট্র্যাপের ওয়েবকিট-প্রিন্ট-রঙ-সমন্বয় রয়েছে তা নিশ্চিত করুন: সঠিক; আপনার শরীরে চেক করার আরেকটি উপায় ... অবশ্যই প্রিন্ট মিডিয়া
সিএসএসে


আমি আপনার এইচটিএমএল অভ্যন্তরীণ @media print { body {margin:0; padding:0; line-height: 1.4em; word-spacing:1px; letter-spacing:0.2px; font: 12px Arial, Helvetica,"Lucida Grande", serif; color: #000;}....
সিএসএসে যেমন বলেছিলে

আমি এটি আবার সম্পাদনা করেছি তবে এখনও ডিফিয়ে.কম

32

ব্যাকগ্রাউন্ড গ্রাফিক্স সেটিংটি বন্ধ থাকলে মুদ্রণ করার সময় ক্রোম ব্যাকগ্রাউন্ড-রঙ বা অন্যান্য বেশ কয়েকটি স্টাইল সরবরাহ করবে না।

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

এখানে চিত্র বর্ণনা লিখুন


আরে, অবশেষে আমি কোনও কারণে j jffizz.net/qm7shrvf একটি ফিডল তৈরি করতে পেরেছি, মুদ্রণ পূর্বরূপে সবুজ বা লাল পটভূমি রেন্ডার জন্য আমি ক্রোম পেতে পারি না (যদিও আমি আসলে এটি প্রিন্ট করার চেষ্টা করি নি) ধন্যবাদ! (আমি পর্যবেক্ষণ করেছি যে jsfiddle.net এর কালো পটভূমি যদিও সেই ক্রোম সেটিংটির ভিত্তিতে রেন্ডার হয়ে যায়)
এরিক

31

!importantব্যাকগ্রাউন্ড-কালার ট্যাগটিতে এটি প্রদর্শন করার জন্য আমাকে কেবল এট্রিবিউটটি যুক্ত করার দরকার ছিল, ওয়েবকিট অংশের প্রয়োজন হয়নি:

background-color: #f5f5f5 !important;


এটি ঠিক আছে ..আমি কি গুরুত্বপূর্ণ কারণটি উত্তর না দিয়ে রঙটি দেখানো হচ্ছে না তা আমি জানি
কুমার

ঠিক আছে বুঝতে পারছেন না কেন এটি হচ্ছে তবে এটি আমার সমস্যার সমাধান করেছে :-)
শ্রীকান্ত

11

আপনি যদি বুটস্ট্র্যাপ বা অন্য কোনও তৃতীয় পক্ষের সিএসএস ব্যবহার করে থাকেন তবে নিশ্চিত হয়ে নিন যে আপনি কেবল এটিতে মিডিয়া স্ক্রিন নির্দিষ্ট করেছেন, তাই আপনার নিজের সিএসএস ফাইলগুলিতে মুদ্রণ মিডিয়া টাইপের নিয়ন্ত্রণ আপনার কাছে রয়েছে:

<link rel="stylesheet" media="screen" href="">



8

এইসব বুটস্ট্র্যাপ.সিএসএস ব্যবহারের জন্য, এটি ঠিক করা!

আমি সমস্ত সমাধান চেষ্টা করেছি এবং সেগুলি কার্যকর ছিল না ... যতক্ষণ না আমি আবিষ্কার করেছি যে বুটস্ট্র্যাপ সিএসএসে একটি দুর্দান্ত বিরক্তিকর রয়েছে @media printযা আপনার সমস্ত রঙ, পটভূমি-বর্ণ, ছায়া গো ইত্যাদি পুনরায় সেট করে ...

@media print{*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important}

সুতরাং বুটস্ট্র্যাপ.সিএস (বা বুটস্ট্র্যাপ.মিন.সিএসএস) থেকে এই বিভাগটি সরিয়ে ফেলুন either

বা আপনি নিজের মুদ্রণ করতে চান পৃষ্ঠার CSS এ এই মানগুলি ওভাররাইড করুন @media print

@media print {
  body { 
    -webkit-print-color-adjust: exact; 
  }
  .customClass{
     //customCss + !important;
  }
  //more of your custom css
}

6

আপনার @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;
}

এখানে কয়েকটি বিষয় লক্ষণীয়:

  • ব্যাকগ্রাউন্ড-কালার হ'ল পরম ফ্যালব্যাক এবং বেশিরভাগ ক্ষেত্রে এখানে উত্তরোত্তর রয়েছে।
  • পটভূমি-চিত্রটি একটি পিএনজি তৈরি # 404040 এর 1px x 1px পিক্সেল ব্যবহার করে। যদি ব্যবহারকারী চিত্রগুলি সক্ষম করে থাকে তবে এটি কাজ করতে পারে, না হলে ...
  • বাক্স-ছায়া সেট করুন, যদি এটি কাজ না করে ...
  • সীমানা = 1/2 আপনার পছন্দসই উচ্চতা এবং / বা বাক্সের প্রস্থ, শক্ত, রঙ। উপরের উদাহরণে আমি একটি 60px উচ্চতার বাক্স চাইছিলাম।
  • আপনি সীমানা বৈশিষ্ট্যে কী নিয়ন্ত্রণ করছেন তার উপর নির্ভর করে উচ্চতা / প্রস্থকে জিরো করুন।
  • গুরুত্বপূর্ণ না হলে ফন্টের রঙ কালো হয়ে যাবে black
  • বাক্সটির দৈহিক মাত্রা না থাকার জন্য স্থির করতে লাইন-উচ্চতা 0 তে সেট করুন।
  • আপনার নিজস্ব পিএনজি তৈরি করুন এবং হোস্ট করুন :-)
  • যদি ব্লকের পাঠ্যটি মোড়ানোর প্রয়োজন হয় তবে এটি একটি ডিভের মধ্যে রাখুন এবং ডিভিটি অবস্থানটি ব্যবহার করে অবস্থান করুন: আপেক্ষিক; এবং লাইন উচ্চতা সরান।

আরও বিশদ বিক্ষোভের জন্য আমার কোলাহলটি দেখুন ।


4

আপনি কি নিশ্চিত যে এটি একটি CSS সমস্যা? এই সমস্যা এড়াতে Google এ কিছু পোস্ট আছে: http://productforums.google.com/forum/#!category-topic/chrome/discuss-chrome/eMlLBcKqd2s

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


3

আইই জন্য

আপনি যদি IE ব্যবহার করে থাকেন তবে প্রিন্ট প্রিভিউতে যান (ডকুমেন্টে ডান ক্লিক করুন -> মুদ্রণ প্রাকদর্শন), সেটিংসে যান এবং সেখানে "মুদ্রিত পটভূমির রঙ এবং চিত্রগুলি" বিকল্প রয়েছে, সেই বিকল্পটি নির্বাচন করুন এবং চেষ্টা করুন।

এখানে চিত্র বর্ণনা লিখুন


2

@ মিডিয়া প্রিন্টের নীচে বুটস্ট্র্যাপ সিএসএস ফাইলগুলিতে একটি স্টাইল রয়েছে, * ,: পরে,: .... আগে ....} এর রঙ এবং পটভূমি শৈলীযুক্ত লেবেলযুক্ত! গুরুত্বপূর্ণ, যে কোনও উপাদানগুলির মধ্যে কোনও ব্যাকগ্রাউন্ডের রঙ মুছে দেয়। সিএসএসের এই দুটি টুকরোটি মেরে ফেলুন এবং এটি কার্যকর হবে।

বুটস্ট্র্যাপ কার্যকর করার সিদ্ধান্ত নিচ্ছে যে প্রিন্টগুলিতে আপনার কোনও পটভূমির রঙ কখনই থাকা উচিত নয় , সুতরাং আপনাকে তাদের সিএসএস সম্পাদনা করতে হবে বা অন্য একটি গুরুত্বপূর্ণ শৈলী থাকতে হবে যা উচ্চতর নজির। ভালো কাজের বুটস্ট্র্যাপ ...


2

আমি purgtory101 এর উত্তর ব্যবহার করেছি তবে সমস্ত রঙ (আইকন, ব্যাকগ্রাউন্ড, পাঠ্যের রং ইত্যাদি ...) রাখতে সমস্যা হয়েছে, বিশেষত সিএসএস স্টাইলশিটগুলি লাইব্রেরিতে ব্যবহার করা যাবে না যা গতিশীলভাবে ডিওএম উপাদানটির রঙ পরিবর্তন করে। সুতরাং এখানে একটি স্ক্রিপ্ট রয়েছে যা মুদ্রণের আগে উপাদানগুলির শৈলীর ( background-colourএবং colour) পরিবর্তন করে এবং মুদ্রণ শেষ হওয়ার পরে শৈলীগুলি সাফ করে। @media printস্টাইলশিটে প্রচুর সিএসএস লেখা এড়াতে দরকারী কারণ এটি পৃষ্ঠার কাঠামো যা কাজ করে works

স্ক্রিপ্টের একটি অংশ রয়েছে যা ফন্টআউভিজ আইকনগুলিকে রঙিন রাখার জন্য বিশেষভাবে তৈরি করা হয়েছে (বা :beforeরঙিন সামগ্রী অন্তর্ভুক্ত করতে নির্বাচক ব্যবহার করে এমন কোনও উপাদান )।

স্ক্রিপ্টটি কার্যকর অবস্থায় দেখছে জেএসফিডাল

সামঞ্জস্যতা: ক্রোমে কাজ করে, আমি অন্যান্য ব্রাউজারগুলিকে পরীক্ষা করিনি।

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

যে অংশটির জন্য সিএসএস তৈরি করতে আইকনগুলির পাথগুলি পাওয়া যায়: উপাদানগুলির আগে এই এসও উত্তরটির একটি অনুলিপি থাকে


1
এটি কাজ করে, ধন্যবাদ (নোট করুন যে আপনাকে আপনার শেষ কোড স্নিপেট varথেকে সরিয়ে ফেলতে হবে window)
অ্যাডেলরিওসেন্টিয়াগো


1

আপনি যদি বুটস্ট্র্যাপ ব্যবহার করছেন তবে আপনার কাস্টম CSS ফাইলটিতে এই কোডটি ব্যবহার করুন just বুটস্ট্র্যাপ মুদ্রণ পূর্বরূপে আপনার সমস্ত রঙ মুছে ফেলে।

@media print{
  .box-text {

    font-size: 27px !important; 
    color: blue !important;
    -webkit-print-color-adjust: exact !important;
  }
}

0

আপনি যদি "মুদ্রণ মিডিয়া স্টাইলগুলি" বিকল্প ব্যতীত বুটস্ট্র্যাপ ডাউনলোড করেন তবে আপনার এই সমস্যাটি হবে না এবং আপনার বুটস্ট্র্যাপ.এসএস ফাইলে ম্যানুয়ালি "@ মিডিয়া প্রিন্ট" কোডটি সরিয়ে ফেলতে হবে না।


0

আপনি যদি বুটস্ট্র্যাপ ব্যবহার করেন তবে এর জন্য সেরা সমাধানটি কেবলমাত্র একটি কাজ এর মাধ্যমে সমস্ত কোড @ মিডিয়া প্রিন্ট remove remove মুছে ফেলুন । এবং মুদ্রণ পূর্বরূপ নেওয়ার সময় আরও সেটিংস থেকে পটভূমি গ্রাফিক্স সক্ষম করুন।


মুদ্রণের সময় সমস্ত মুদ্রণ সিএসএস কেন সরান?
মুনিম মুন্না

এটি প্রিন্টের জন্য রঙ দৃশ্যমান করতে হয়
মোহাম্মদ। শাইজাদ

-1

আমি আমার বাহ্যিক সিএসএস উত্স ফাইলটি দ্বিগুণ লোড করেছি এবং মিডিয়া = "স্ক্রিন" কে মিডিয়া = "মুদ্রণ" এ পরিবর্তন করেছি এবং আমার টেবিলের জন্য সমস্ত সীমানা দেখানো হয়েছিল

এটা চেষ্টা কর :

<link rel="stylesheet" media="print" href="bootstrap.css" />

<link rel="stylesheet" media="screen" href="bootstrap.css" />

1
এটি মিডিয়া = "সমস্ত" দিয়ে দুটি লিঙ্ক ট্যাগের পরিবর্তে করা যেতে পারে
বড়_ জল
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.