সিএসএস দিয়ে পটভূমি চিত্রের আকার নির্ধারণ করা কি সম্ভব?
আমি এরকম কিছু করতে চাই:
background: url('bg.gif') top repeat-y;
background-size: 490px;তবে মনে হচ্ছে এটি করা সম্পূর্ণ ভুল ...
উত্তর:
আপনার যদি চিত্রটি আরও বড় করতে হয় তবে আপনাকে অবশ্যই একটি চিত্র সম্পাদক এ চিত্রটি সম্পাদনা করতে হবে।
আপনি যদি ইমগ ট্যাগটি ব্যবহার করেন, আপনি আকার পরিবর্তন করতে পারেন, তবে যদি ছবিটি অন্য কোনও সামগ্রীর পটভূমির প্রয়োজন হয় তবে এটি আপনাকে পছন্দসই ফলাফল দেয় না (এবং এটি নিজের পছন্দ মতো পুনরাবৃত্তি করবে না ...)
এটি CSS3 এ দিয়ে করা সম্ভব background-size ।
সমস্ত আধুনিক ব্রাউজারগুলি এটি সমর্থন করে, সুতরাং যদি না আপনার পুরানো ব্রাউজারগুলি সমর্থন করার প্রয়োজন হয়, এটি এটি করার উপায়।
সমর্থিত ব্রাউজারগুলি:
মজিলা ফায়ারফক্স 4.0+ (গেকো 2.0+), মাইক্রোসফ্ট ইন্টারনেট এক্সপ্লোরার 9.0+, অপেরা 10.0+, সাফারি 4.1+ (ওয়েবকিট 532) এবং Chrome 3.0+।
.stretch{
/* Will stretch to specified width/height */
background-size: 200px 150px;
}
.stretch-content{
/* Will stretch to width/height of element */
background-size: 100% 100%;
}
.resize-width{
/* width: 150px, height: auto to retain aspect ratio */
background-size: 150px Auto;
}
.resize-height{
/* height: 150px, width: auto to retain aspect ratio */
background-size: Auto 150px;
}
.resize-fill-and-clip{
/* Resize to fill and retain aspect ratio.
Will cause clipping if aspect ratio of box is different from image. */
background-size: cover;
}
.resize-best-fit{
/* Resize to best fit and retain aspect ratio.
Will cause gap if aspect ratio of box is different from image. */
background-size: contain;
}বিশেষত, আমি coverএবং পছন্দ করিcontain মানগুলি পছন্দ করি যা আমাদের নতুন নিয়ন্ত্রণের শক্তি দেয় যা আমাদের আগে ছিল না।
আপনি background-size: roundপুনরাবৃত্তির সাথে একত্রে এর অর্থও ব্যবহার করতে পারেন:
.resize-best-fit-in-repeat{
/* Resize to best fit in a whole number of times in x-direction */
background-size: round auto; /* Height: auto is to keep aspect ratio */
background-repeat: repeat;
}এটি চিত্রের প্রস্থকে সামঞ্জস্য করবে তাই এটি ব্যাকগ্রাউন্ড পজিশনিংয়ের ক্ষেত্রে পুরো সংখ্যক বারের সাথে ফিট করে।
অতিরিক্ত দ্রষ্টব্য
যদি আপনার প্রয়োজনীয় আকারটি স্থির পিক্সেল আকার হয় তবে এটি প্রকৃত চিত্রটিকে শারীরিকভাবে পুনরায় আকার দেওয়ার জন্য স্মার্ট। এটি পুনরায় আকারের মান উন্নত করার জন্য (আপনার চিত্র সফ্টওয়্যার ব্রাউজারগুলির তুলনায় আরও ভাল কাজ করে) এবং ব্যান্ডউইথকে সংরক্ষণ করতে যদি মূল চিত্রটি প্রদর্শিত হয় তার চেয়ে বড় হয়।
কেবল সিএসএস 3 এটি সমর্থন করে,
background-size: 200px 50px;তবে আমি চিত্রটি নিজেই সম্পাদনা করব, যাতে ব্যবহারকারীর কম লোড হওয়া দরকার, এবং এটি এন্টালিয়ালিং ছাড়াই সঙ্কুচিত চিত্রের চেয়ে আরও ভাল দেখাচ্ছে।
background: url('resized_image.png')\9;IE
যদি আপনার ব্যবহারকারীরা কেবল অপেরা 9.5+, সাফারি 3+, ইন্টারনেট এক্সপ্লোরার 9+ এবং ফায়ারফক্স 3.6+ ব্যবহার করেন তবে উত্তরটি হ্যাঁ। অন্যথায়, না।
পটভূমি আকার সম্পত্তি সিএসএস 3 এর অংশ, কিন্তু এটা সবচেয়ে ব্রাউজারে কাজ করবে না।
আপনার উদ্দেশ্যে কেবল আসল চিত্রটি আরও বড় করুন।
সম্ভব না । পটভূমিটি সর্বদা এটির মতো বৃহত্তর হবে তবে আপনি এটিকে নিজের সাথে পুনরাবৃত্তি করা থেকে বিরত রাখতে পারেন background-repeat।
background-repeat: no-repeat;দ্বিতীয়ত, ব্যাকগ্রাউন্ডটি কোনও বাক্সের মার্জিন-অঞ্চলে যায় না, সুতরাং আপনি যদি পটভূমিটি কেবল একটি বাক্সের আসল বিষয়বস্তুতে রাখতে চান তবে আপনি প্যাডিংয়ের পরিবর্তে মার্জিন ব্যবহার করতে পারেন।
তৃতীয়ত, আপনি ব্যাকগ্রাউন্ড চিত্রটি যেখানে শুরু হবে তা নিয়ন্ত্রণ করতে পারেন। ডিফল্টরূপে এটি একটি বক্সের উপরের বাম কোণে, তবে আপনি এটির মাধ্যমে এটি নিয়ন্ত্রণ করতে পারেন background-position:
background-position: center top;অথবা সম্ভবত
background-position: 20px -14px;নেতিবাচক অবস্থান সিএসএস স্প্রেটসের সাথে প্রচুর ব্যবহৃত হয় ।
একটি ভুলে যাওয়া যুক্তি রয়েছে:
background-size: contain;এটি আপনার প্রসারিত হবে না background-imageযেমনটি এটি করবে cover। দীর্ঘ প্রান্তটি বাইরের ধারকটির প্রস্থ বা উচ্চতা পর্যন্ত না পৌঁছানো এবং তাই চিত্রটি সংরক্ষণ করা পর্যন্ত এটি প্রসারিত হবে।
সম্পাদনা: এছাড়াও আছে -webkit-background-sizeএবং -moz-background-size।
পটভূমি-আকারের বৈশিষ্ট্য আইই 9 +, ফায়ারফক্স 4+, অপেরা, ক্রোম এবং সাফারি 5+ এ সমর্থিত।
@ টেট্রা যে উত্তর দিয়েছিল তার সমর্থনে, আমি এটি উল্লেখ করতে চাই যে চিত্রটি যদি কোনও এসভিজি হয়, তবে প্রকৃত চিত্রটির আকার পরিবর্তন করা প্রয়োজন নয়।
যেহেতু কোনও এসভিজি ফাইল কেবল এক্সএমএল তাই আপনি এটি XML এর মধ্যে প্রদর্শিত হতে চান তার আকার নির্দিষ্ট করতে পারেন।
তবে, আপনি যদি একই জায়গায় এসভিজি চিত্রটি বিভিন্ন স্থানে ব্যবহার করছেন এবং এটির বিভিন্ন আকারের প্রয়োজন হয়, তবে ব্যবহার করছেন background-size করা খুব সহায়ক। এসভিজি ফাইলগুলি যাইহোক রাস্টার ইমেজের তুলনায় অন্তর্নিহিত ছোট এবং সিএসএসের সাথে ফ্লাইতে আকার পরিবর্তন করা আমি যে কোনও পারফরম্যান্স ব্যয়ের বিষয়ে অবগত যা না করে খুব সহায়ক হতে পারে, এবং গুণমানের কোনও ক্ষতি হ্রাস করা অবশ্যই খুব কম।
এখানে একটি দ্রুত উদাহরণ:
<div class="hasBackgroundImage">content</div>
.hasBackgroundImage
{
background: transparent url('/image/background.svg') no-repeat 10px 5px;
background-size: 1.4em;
}(দ্রষ্টব্য: এটি ফায়ারফক্স 8, সাফারি 5.1 এবং Chrome 16.0.912.63 সহ OS X 10.7 এ আমার জন্য কাজ করে)
আপনি CSS3 এর সাথে পুরোপুরি পারেন:
body {
background-image: url(images/bg-body.png);
background-size: 100%; /* size the background image at 100% like any responsive img tag */
background-position: top center;
background-repeat:no-repeat;
}এটি শরীরের উপাদানগুলির প্রস্থের প্রস্থের 100% আকারে একটি পটভূমি চিত্রকে আকার দেবে এবং এরপরে সেই অনুযায়ী পটভূমিটিকে আবার আকার দেবে কারণ দেহের উপাদান ছোট রেজোলিউশনের জন্য পুনরায় আকার দেয়।
এখানে উদাহরণটি দেওয়া হয়েছে: http://www.sccc.premiumdw.com/example/resize-background-images-with-css/
কেবল নেস্টেড ডিভগুলি ক্রস ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ হতে হবে
<div>
<div style="background: url('bg.gif') top repeat-y;min-width:490px;">
Put content here
</div>
</div>
আপনি দুটি <div>উপাদান ব্যবহার করতে পারেন :
একটি হ'ল একটি ধারক (এটি যা আপনি মূলত পটভূমির চিত্রটি প্রদর্শিত হতে চেয়েছিলেন)।
দ্বিতীয়টি এর মধ্যে রয়েছে। আপনি এর আকারটি পটভূমির চিত্রের আকারে নির্ধারণ করেছেন (বা আপনি যে আকারটি প্রদর্শিত হতে চান)।
অন্তর্ভুক্ত ডিভ তারপর অবস্থান নির্ধারণ করা হয়েছে absolute। এইভাবে এটি ডিভযুক্ত ডিভের আইটেমগুলির স্বাভাবিক প্রবাহের সাথে হস্তক্ষেপ করে না।
এটি আপনাকে স্প্রিট চিত্রগুলি দক্ষতার সাথে ব্যবহার করতে সক্ষম করে।
put the below code in the body of you css file
background-image: URL('../images/wave-green-plain-colour.jpg') ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100px;আপনি লিখেছেন
background: url('bg.gif') top repeat-y;
background-size: 490px;তবে আপনি কেবল ধারকটির আকারের উপর নির্ভর করে পটভূমি দেখতে পাবেন।
আপনার যদি ব্যাকগ্রাউন্ড url সহ খালি ধারক থাকে এবং পটভূমির আকার যাই হোক না কেন, আপনি বিজি.gif দেখতে পাবেন না।
আপনি যদি মহাদেশের আকার সেট করে থাকেন
background: url('bg.gif') top repeat-y;
background-size: 490px;
height: 490px;
width: 490px;আপনি উপরে উল্লিখিত কোডটির সাথে মিলিত হয়ে আপনি bg.gif ফাইলটি দেখতে সক্ষম হবেন।
আমি বোতামগুলির জন্য ব্যাকগ্রাউন্ড চিত্র ব্যবহার করি তবে এটি প্রস্থ এবং উচ্চতা নির্ধারণ করা হলেও চিত্রটি কেবল পাঠ্যের সমান আকার দেখায়। পরিবর্তে, আমি অক্ষরগুলি (অ-ব্রেকিং স্পেস) দিয়ে আমার পাঠ্য প্যাড করব । আমি যতটা প্রয়োজন ততক্ষণ চড় দিয়েছিলাম, যতক্ষণ না সমস্ত বোতামের পটভূমি উপস্থিত হয়। সুতরাং আমি এর মত কোড থাকতে পারে:
স্টাইল শীটে:
#v2menu-home {
background-image:url(../v2-siteimages/button.png);
background-repeat:no-repeat;
}এইচটিএমএল নথিতে:
<div id="v2menu">
<a id="v2menu-home" href="/index.php">home </a>
</div><!-- v2menu -->উদাহরণস্বরূপ:
পটভূমি চিত্র সর্বদা ধারক আকারের (প্রস্থ 100% এবং উচ্চতা 100px) ফিট করে।
ক্রস ব্রাউজার সিএসএস:
.app-header {
background: url("themes/default/images/background.jpg") no-repeat;
-moz-background-size: 100% 100px;
-webkit-background-size: 100% 100px;
-o-background-size: 100% 100px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src = "themes/default/images/background.jpg", sizingMethod = 'scale');
background-size: 100% 100px;}
ব্যাকগ্রাউন্ড-আকারের সাথে CSS3 এ করা সম্ভব
.backgroungImage {
background: url('../imageS/background.jpg') no-repeat;
background-size: 32px 32px;
}আপনি যদি background-sizeএকই backgroundসম্পত্তি সেট করতে চান তবে আপনি ব্যবহার করতে পারেন:
background:url(my-bg.png) no-repeat top center / 50px 50px;