আমি কীভাবে ব্রাউজারগুলিকে CSS এ ব্যাকগ্রাউন্ড চিত্র মুদ্রণ করতে বাধ্য করতে পারি?

Question

এই প্রশ্নটি আগে জিজ্ঞাসা করা হয়েছিল তবে সমাধানটি আমার ক্ষেত্রে প্রযোজ্য নয়। আমি নিশ্চিত করতে চাই যে নির্দিষ্ট পটভূমি চিত্রগুলি মুদ্রিত হয়েছে কারণ সেগুলি পৃষ্ঠার সাথে অবিচ্ছেদ্য। (এগুলি সরাসরি পৃষ্ঠায় চিত্র নয় কারণ তাদের মধ্যে বেশ কয়েকটি সিএসএস স্প্রাইট হিসাবে ব্যবহৃত হচ্ছে))

একই প্রশ্নের আরেকটি সমাধান ব্যবহার করার পরামর্শ দেয় list-style-image, যা কেবলমাত্র যদি প্রতিটি আইকনের জন্য আলাদা চিত্র থাকে তবে কোনও সিএসএস স্প্রিট সম্ভব হয় না works

আইকনগুলিকে ইনলাইন দিয়ে পৃথক পৃষ্ঠা তৈরি করা বাদ দিয়ে অন্য কোনও সমাধান আছে কি?

Answer 1

ব্রাউজারের মুদ্রণ পদ্ধতিতে আপনার খুব কম নিয়ন্ত্রণ রয়েছে। সর্বাধিক আপনি SUGGEST করতে পারেন, তবে ব্রাউজারের মুদ্রণ সেটিংসে "ব্যাকগ্রাউন্ড চিত্রগুলি মুদ্রণ করবেন না" থাকলে অন্য পৃষ্ঠার পিছনে থাকা ব্যাকগ্রাউন্ড চিত্রগুলিকে ভাসমান "অগ্রভাগ" চিত্রগুলিতে রূপান্তর করতে আপনার পৃষ্ঠায় পুনর্লিখন না করে কিছুই করার নেই।

Answer 2

ক্রোম এবং সাফারি দিয়ে আপনি -webkit-print-color-adjust: exact;ব্যাকগ্রাউন্ডের রঙ এবং / বা চিত্র মুদ্রণের জন্য উপাদানটিতে সিএসএস স্টাইল যুক্ত করতে পারেন

Comments

এটা সত্যিই দারুন. ভুতোম ব্যবহারকারী / ওয়েবকিটের জন্য জীবনকে অনেক সহজ করে তোলে

— জেসন

@ মুনিমহাবীব এটি আইই তে কাজ করে না, প্রকৃতপক্ষে, একমাত্র সমর্থিত ব্রাউজারটি হ'ল ক্রোম: বিকাশকারী.মোজিলা.আর.ইন-

— ইউএস / ডকস / ওয়েবে / সিএসএস/…

এটি ক্রোমের জন্য কৌশলটি করেছে ... ভাগ্যক্রমে এই ক্ষেত্রে আমার কেবল ওয়েককিটকে সমর্থন করা দরকার ...

— ডেভি

@ ডিসগ্রান্টলড গোটের সঠিক উত্তর হিসাবে এটি আপডেট করা উচিত কারণ এটি আমার সমস্যাটি দ্রুত সমাধান করেছে (আমার কাজ কর্মস্থলে কেবল ক্রোমের উপর দৃষ্টি নিবদ্ধ করে)। এটি অবশ্যই সমস্ত ব্রাউজারের জন্য কাজ করে না তবে এটি নির্বিশেষে সামনেই জানা উচিত।

— ব্রেট 84c

@ ব্রেট ৮৪c: আমি একমত না কারণ এটি একটি ব্রাউজারের একমাত্র সমাধান।

— কুকলতজে

Answer 3

ডিফল্টরূপে ব্রাউজারগুলিতে পটভূমির রঙগুলি এবং চিত্রগুলি বন্ধ করার বিকল্প রয়েছে। এটিকে বাইপাস করতে আপনি CSS এ কিছু লাইন যুক্ত করতে পারেন। শুধু যোগ কর:

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

Comments

ইয়া ভাল কাজ করে তবে মজিলা চিহ্নটি নন স্ট্যান্ডার্ড

— Qh0stM4N

কেন !importantপ্রয়োজনীয়?

আমার জন্য কাজ! ধন্যবাদ.

— নিক উডহামস

color-adjustদুর্ভাগ্যক্রমে ফায়ারফক্স সঠিকভাবে সমর্থন করে না। এটি কেবল ব্যাকগ্রাউন্ডে প্রয়োগ হয়, colorCSS সম্পত্তিতে নয় property এটি কোনও তত্পরতা বা ভোট ছাড়াই বাগ হিসাবে রিপোর্ট করা হয় । ফন্টের রঙ সংরক্ষণ না করা হলে ব্যাকগ্রাউন্ড রাখা বেশ অযথা, কারণ এটি অপঠনযোগ্য হতে পারে।

— ফ্রেডেরিক

এটি একটি ভাল সমাধান। শুধু মনে রাখবেন এটি আইই 11 এর সাথে কাজ করে না (আমি জানি!)।

— রাফেল এস ফিজালকোভস্কি

Answer 4

আমি CSS সহ পটভূমি চিত্র মুদ্রণের একটি উপায় খুঁজে পেয়েছি। আপনার পটভূমিটি কীভাবে সাজানো হয়েছে তার উপর এটি কিছুটা নির্ভরশীল তবে এটি আমার অ্যাপ্লিকেশনটির জন্য কাজ করে বলে মনে হচ্ছে।

মূলত, আপনি @media printআপনার স্টাইলশিটের শেষে যুক্ত করুন এবং শরীরের পটভূমিটি কিছুটা পরিবর্তন করুন।

উদাহরণস্বরূপ, যদি আপনার বর্তমান সিএসএস এর মত দেখাচ্ছে:

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

আপনার স্টাইলশিটের শেষে, আপনি যুক্ত করুন:

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

এটি চিত্রটিকে "সম্মুখভূমি" চিত্র হিসাবে শরীরে যুক্ত করে, যাতে এটি মুদ্রণযোগ্য হয়। z-indexযথাযথ করতে আপনাকে কিছু অতিরিক্ত সিএসএস যুক্ত করতে হবে । তবে আবার, আপনার পৃষ্ঠাটি কীভাবে ছড়িয়ে দেওয়া হয়েছে তা এটি up

প্রিন্ট ভিউতে দেখানোর জন্য যখন শিরোনাম চিত্রটি না পেলাম এটি আমার পক্ষে কাজ করেছিল।

Comments

আমার যা করা দরকার ছিল এটির জন্য এটি একটি দুর্দান্ত সমাধান ছিল যা <img>আলাদাভাবে একটি সাথে একটি ইনলাইন (আরডাব্লুডির জন্য) স্যুইচ করা হয়েছিল @media print। ওয়েব চিত্রটি একটি অন্ধকার পটভূমিতে ছিল, তাই সেই চিত্রটি মুদ্রণ করা সাদা কাগজে কাজ করে না, এবং আমি ব্যবহারকারীদের হেডারটিতে একটি অন্ধকার পটভূমি মুদ্রণ করতে বাধ্য করতে চাই না। পারফেক্ট!

— JHogue

@ জহোগ - ধন্যবাদ! খুশী হ'ল আপনাকে সাহায্য করেছে।

— ckpepper02

যদিও এটি কোনও "সঠিক" উত্তর নয়। এটি গৃহীত উত্তরের চেয়ে অনেক বেশি সহায়ক।

— জেনোলজি

নীচে উত্তর স্ট্যাকওভারফ্লো.com/a/15208258/915865 চিহ্নিত করা উচিত কারণ এটির আরও ভাল ব্যাখ্যা রয়েছে, ইমো

— ক্যাট লিম রুইজ

ফায়ারফক্সে এটি কেবল তখনই কাজ করত যদি আপনি অভ্যন্তরীণ সামগ্রী ব্যবহার করেন: @ হাঞ্জ উত্তর পছন্দ করার আগে

— ভাসকোর্ট

Answer 5

নীচের কোডটি আমার পক্ষে ভালভাবে কাজ করে (কমপক্ষে ক্রোমের জন্য)।

আমি কিছু মার্জিন এবং পৃষ্ঠা ওরিয়েন্টেশন নিয়ন্ত্রণও যুক্ত করেছি ((প্রতিকৃতি, ল্যান্ডস্কেপ)

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

Answer 6

গুরুত্বপূর্ণ বৈশিষ্ট্যটি ব্যবহার নিশ্চিত করে নিন। এটি মুদ্রণের সময় আপনার শৈলীগুলি ধরে রাখার সম্ভাবনা নাটকীয়ভাবে বৃদ্ধি করে।

#example1 {
    background:url(image.png) no-repeat !important;
}

#example2 {
    background-color: #123456 !important;
}

Comments

আমি এই পদ্ধতিটি ব্যবহার করে আমার সংস্থার জন্য কিছু সাধারণ "প্রিন্টার বান্ধব" প্রতিবেদন তৈরি করেছি। এটি ওএস এক্স ক্রোম / সাফারি এবং উইন্ডোজ 8 ক্রোম / আইইতে কাজ করে (অন্য কোনও প্ল্যাটফর্ম চেষ্টা করে নি)।

— বাদাম-এন-বিয়ার

এটি ম্যাকের ক্রোম, ফায়ারফক্স এবং সাফারিতে কোনও প্রভাব ফেলেছে বলে মনে হচ্ছে।

— ইন্ট্রিক্রিটর

এই নির্দিষ্ট উপাদানটির প্রতিটি ব্যবহারের জন্য অ্যাট্রিবিউটটি প্রয়োগ করার জন্য এটি আমার প্রয়োজন ছিল এবং আমাকে ডকটি যথাযথভাবে মুদ্রণ করতে দিন। ধন্যবাদ!

— জননি

Answer 7

@ Ckpepper02- এর মতো বলেছেন, শরীরের সামগ্রী: url বিকল্পটি ভালভাবে কাজ করে। তবে আমি দেখতে পেয়েছি যে আপনি যদি এটি সামান্য সংশোধন করেন তবে আপনি এটি ব্যবহার করে সর্বাধিক শিরোনামের ইমেজ যুক্ত করতে ব্যবহার করতে পারেন: সিউডো এলিমেন্টের পূর্বে নিম্নরূপ।

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

এটি পৃষ্ঠার শীর্ষে চিত্রটি স্লিপ করবে এবং আমার সীমিত পরীক্ষা থেকে এটি ক্রোম এবং আইই 9 তে কাজ করে

-hanz

Answer 8

Psuedo- উপাদান ব্যবহার করুন। অনেকগুলি ব্রাউজার পটভূমির চিত্রগুলিকে অগ্রাহ্য করবে, তবে চিত্রযুক্ত উপাদানগুলির সাথে চিত্রযুক্ত উপাদানগুলি প্রযুক্তিগতভাবে পটভূমির চিত্র নয়। তারপরে আপনি ব্যাকগ্রাউন্ড চিত্রটি প্রায় স্থিতি করতে পারেন যেখানে চিত্রটি চলে যাওয়া উচিত (যদিও এটি মূল চিত্রের মতো সহজ বা নির্ভুল নয়)।

একটি অপূর্ণতা হ'ল Chrome এ কাজ করার জন্য আপনাকে আপনার মুদ্রণ মিডিয়া ক্যোয়ারির বাইরে এই আচরণটি নির্দিষ্ট করতে হবে এবং তারপরে এটি মুদ্রণ মিডিয়া ক্যোয়ারী ব্লকে দৃশ্যমান করে তুলবে। তো, এরকম কিছু ...

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

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

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

Answer 9

আপনি যোগ করার সময় এটি গুগল ক্রোমে কাজ করছে! পটভূমির চিত্রের গুরুত্বপূর্ণ বৈশিষ্ট্যটি নিশ্চিত করুন যে আপনি প্রথমে গুন যুক্ত করেছেন এবং আবার চেষ্টা করুন, আপনি এটি এর মতো করতে পারেন

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

}

Comments

উল্লেখ করার জন্য ভাল কথা, আমার সমস্যাটি একসাথে-ওয়েবেকিট-প্রিন্ট-রঙ-সমন্বয়ের সাথে সমাধান করেছেন: সঠিক! গুরুত্বপূর্ণ;

— czmarc

Answer 10

আপনি নির্দিষ্ট রঙের জন্য সীমানা ব্যবহার করতে পারেন।

 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;

Answer 11

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

ব্লক, আমি স্ক্রিনে একটি সাদা অন-স্বচ্ছ লোগোটি প্রিন্টের জন্য একটি কালো-অন-স্বচ্ছ লোগো সহ পটভূমির চিত্র হিসাবে রেন্ডার করতে সক্ষম replace

Comments

এটি একটি সুন্দর ফিক্স, তবে পটভূমির চিত্রটি ধারকটির থেকে অনেক বড় হলে এটি কার্যকরভাবে কাজ করে না। (এটি আমার

— ধারণকৃত ডিভটি

Answer 12

আপনি এর মতো কিছু কৌশল করতে পারেন:

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