سی ایس ایس کے پس منظر شفافیت. سی ایس ایس کے ساتھ شفاف پس منظر یا متن

کئی طریقوں میں کام CSS3 ویب ڈیزائنرز کی آمد کے ساتھ آسان اور زیادہ منطقی ہو گیا ہے: سب کے بعد، اب آپ واقعی flexibly پر کسی بھی چیز کو، کم کثرت جاوا سہارا اپنی مرضی کے مطابق کر سکتے ہیں. کی آپ کو پس منظر کی شفافیت کو ایڈجسٹ کرنے کی ضرورت کا کہنا ہے کہ - سی ایس ایس کو فوری طور پر کئی اختیارات فراہم کرتا ہے.

صفات کا ایک سیٹ کی طرف سے مقرر پس منظر (پس منظر کی تصویر، پس منظر-پوزیشن ، پس منظر سائز، پس منظر-دہرائیں، پس منظر-انسلاک، پس منظر نژاد، پس منظر-کلپ، پس منظر کا رنگ)، جن میں سے ہر وصف کے تحت الگ سے مقرر کیا جا سکتا ہے یا مشترکہ پس منظر. ہمیں تفصیل سے ان میں سے ہر ایک کی جانچ پڑتال کرتے ہیں.

پس منظر کا رنگ خاصیت

سی ایس ایس میں، پس منظر کا رنگ ایک ہیکس کوڈ، رنگ کا نام یا آرجیبی اندراج کا استعمال کرتے ہوئے: کئی طریقوں سے مقرر کیا جا سکتا ہے. CSS3 میں جو بجائے RGBA ساتھ آرجیبی ریکارڈنگ آپشن کا استعمال کرنے کے لئے ممکن بن گیا.

پس منظر کا رنگ: # FFDAB9 ہیکس رنگ کا کوڈ کی جعلی بعد جائیداد میں ریکارڈ کیا جاتا ہے. اس اندراج میں حروف ایک ہی جوڑے ہیں، تو کوڈ کو عام طور پر ایک چھوٹا سا کٹ ہے: # ccff00 # cf0 کے طور پر لکھا جا سکتا ہے:

جسم {پس منظر کا رنگ: # cf0 ؛}.

نام بھی سب سے زیادہ غیر ملکی رنگوں میں، ہے. مثال کے طور پر، معیاری سرخ اور سفید آپ NavajoWhite (#FFDEAD) یا Honeydew2 (# E0EEE0) استعمال کر سکتے ہیں کے علاوہ میں:

جسم {پس منظر کا رنگ: جامنی؛ }.

مؤخر الذکر آپشن آرجیبی یا RGBA انٹری آپ نہ صرف رنگ بلکہ CSS پس منظر کی شفافیت کی وضاحت کرنے کی اجازت دیتا ہے، لیکن طریقہ صرف 9 سے زیادہ پرانے IE ورژن میں کام کرتا ہے. دیگر براؤزرز شفافیت کے ساتھ معمول کے ورژن تسلیم کرتے ہیں. W3C معیار کے مطابق یہ اب بھی اس کی بجائے زیادہ معمول RGB کی RGBA استعمال کرنے کے لئے افضل ہے.

RGBA پس منظر میں گزشتہ قدر اور کو 1 (مبہم) 0 (شفاف) دھندلاپن تعین کرتا ہے.

کچھ غیر معمولی اقدار موجود نہیں ہیں. پس منظر کا رنگ HSL اور HSLA کا استعمال کرتے ہوئے مقرر کئے جا سکتے. دونوں CSS3 میں شامل کیا گیا تھا، اور اس وجہ سے یعنی ورژن 9 یا اس سے زیادہ کی طرف سے حمایت نہیں کر رہے ہیں. پیکر کی علامت جیسی آرجیبی یا RGBA، صرف ایک مختلف شکل میں: ہیو (سایہ - رنگ پہیا پر قدر، ڈگری میں دی گئی ہے)، گیلا (سنترپتی - 0 سے 100 کرنے کے لئے ایک فی صد کے طور پر رنگ شدت،)، دھیماپن (دھیماپن - چمک، اسی طرح ماپا پیرامیٹر سے Saturate ).

پس منظر کی تصویر خاصیت

شفاف پس منظر کے سب سے زیادہ کراس براؤزر ورژن - اس تصویر کے استعمال ہے. CSS3 میں، آپ کو اس سے بھی زیادہ تصاویر کو مقرر کر سکتے ہیں، اس کو کوما کے ذریعے کیا جاتا ہے. مثال:

{پس منظر کے جسم کی تصویر: یو آر ایل (bg1.png)، URL (bg2.png)}.

یہاں تک کہ IE8 حمایت کا یہ طریقہ. ترتیب میں استعمال کیا ربڑ کے پس منظر میں کئی تصاویر. اہم بات یہ ہے، صارفین کو صرف ایک تصویر اپ لوڈ کر سکتے ہیں کے طور پر، کسی بھی تصویر کو استعمال کرتے ہیں اور سی ایس ایس میں پس منظر کا رنگ قائم کرنے کے لئے نہیں بھولنا.

پس منظر کی پوزیشن خاصیت

آپ کو پس منظر کے یونٹ قائم کرنے کے لئے تصویر کا استعمال کرتے ہیں، سی ایس ایس آپ کی سکرین پر کہیں بھی تصویر کی حیثیت اجازت دیتا ہے. ڈیفالٹ کی طرف سے، تصویر اوپری بائیں کونے میں واقع ہے. وصف زبانی ہدایات پر یا تو (اوپر، نیچے، دائیں، بائیں)، ایک عددی (سود، پکسلز اور دیگر یونٹس) لیتا ہے. اس صورت میں، آپ کو افقی اور عمودی دو اقدار، کی وضاحت کرنا ضروری ہے:

جسم {پس منظر کی پوزیشن: دائیں مرکز ؛} - اس مثال میں، پیٹرن صفحہ، اسی لئے تصویر فاصلے کے اوپر اور نیچے کے دائیں جانب پر واقع رکھا جائے گا.

پس منظر سائز وصف

کبھی کبھی یہ سی ایس ایس کے پس منظر بڑھاتے یا اس کا سائز کم کرنے کے لئے ضروری ہے. ایسا کرنے کے وصف پس منظر سائز، اور پس منظر پکسلز یا فی صد میں مقرر کیا جا سکتا ہے کے سائز، اور کسی بھی دوسری اکائیوں کا استعمال کریں.

اس وصف کے ساتھ، کچھ مسائل ہیں: براؤزر سابقے کے پہلے ورژن میں ایک پس منظر کے درست ڈسپلے پر استعمال کیا جا کرنے کے لئے. بالکل، موجودہ ورژن کو مکمل طور پر اس وصف کی حمایت اور خاص خصوصیات کے لئے ضرورت کے غائب ہو گیا.

پس منظر کا انسلاک خاصیت

یہ خصوصیت پس منظر کی تصاویر طومار کر رہا ہے جبکہ کے رویے کی وضاحت. لہذا، یہ 3 اقدار (وارث، اس مضمون میں بحث کی صفات میں سے سب کے لئے کل سمیت) لے جا سکتے ہیں:

• فکسڈ - تصویر طے کی پس منظر پر ہوتا ہے؛
• میں سکرال - عناصر کے باقی حصوں کے ساتھ پس منظر سکرال؛
• مقامی - طومار مواد ہے تو پس منظر پر تصویر کو لڑھکا ہے. فریم کے مندرجات سے باہر جاتا ہے کہ پس منظر مقرر کیا جاتا ہے.

استعمال کی مثال:

جسم {پس منظر منسلکہ کے مقررہ}.

فی الحال، فائر فاکس گزشتہ جائیداد (مقامی) کی حمایت نہیں کرتا.

پس منظر کا اصل خاصیت

یہ وصف پوزیشننگ عنصر کے لئے ذمہ دار ہے. ابتدائی براؤزر سابقے کے استعمال کی ضرورت ہوتی ہے. جائیداد خود تین پیرامیٹرز ہے:

• اکاؤنٹ میں فریم کی موٹائی رکھتے ہوئے بھرتی باکس، کنارے پیٹرن کے رشتہ دار کی پوزیشن میں ہے؛
• سرحدی لائن ہو سکتا ہے کہ میں پچھلے سے مختلف سرحد باکس کی خصوصیات کے مکمل طور پر یا جزوی طور پر پیٹرن وورلیپ؛
• مواد باکس پوزیشننگ تصویر اس کے مواد pryavyazyvaya.

آپ ایک سے زیادہ اقدار کی وضاحت کرتا ہوں، تو براؤزر اپنے طریقے سے رد عمل کا اظہار کر سکتے ہیں: فائر فاکس اور اوپرا صرف پہلی آپشن خبر.

پس منظر دہرانے خاصیت

ایک اصول کے طور پر، پس منظر کی تصویر کی وضاحت کی ہے، تو یہ افقی یا عمودی طور پر بار بار ہونا ضروری ہے. اس کے لئے اور وصف کے پس منظر-دہرائیں استعمال کیا. اس طرح، بلاک پس منظر، CSS اس طرح کی جائیداد پر مشتمل ہے جس میں کئی پیرامیٹرز میں سے ایک ہو سکتا ہے:

• کوئی دہرانے - تصویر ایک بھی ورژن میں ایک صفحے پر ظاہر ہوتا ہے؛
• دہرانے - پس منظر X اور Y میں دہرایا جاتا ہے؛
• دہرانے-X - صرف افقی طور پر؛
• دہرانے-Y - صرف عمودی طور پر؛
• خلا - پس منظر دہرایا گیا ہے، لیکن اس کی جگہ تصاویر کے درمیان میں بھرنے کے لئے ناممکن ہے تو خالی نظر؛
• گول - یہ ساری تصاویر کے پورے علاقے کو بھرنے نہیں کرتا تو تصویر، چھوٹا کر دیا جاتا ہے.

صفات کی مثال:

جسم {پس منظر-دہرائیں: no- دہرائیں} - اسی طرح کے پس منظر-دہرائیں: دہرانے-Y.

پیرامیٹرز، کوما سے علیحدہ فہرست جب CSS3 میں ایک سے زیادہ تصاویر کے لئے اقدار کی وضاحت کر سکتا ہے.

پس منظر کلپ خاصیت

یہ خصوصیت (بندیدار فریموں کی صورت میں، جیسے) حدود کے تحت پس منظر کے رویے کی وضاحت:

• بھرتی باکس - پس منظر بلاک کے اندرونی میں دکھایا؛
• سرحد باکس - تصویر فریم ورک کے تحت آتا ہے؛
• مواد باکس - پس منظر پر تصویر کو مواد کے اندر اندر دکھایا جائے گا.

استعمال کی مثال:

جسم {پس منظر کلپ: کے مواد کے خانے؛}.

کروم اور سفاری -webkit- سابقہ ضرورت ہوتی ہے.

دھندلاپن صفات اور فلٹر

CSS جائیداد تمام براؤزرز میں کام کریں گے - دھندلاپن وصف آپ کے پس منظر کی شفافیت کو قائم کرنے کے لئے اجازت دیتا ہے. قدر 0.0 سے 1.0 پر مشتمل ہے کو حد میں مقرر کیا گیا ہے. اس صورت میں، آپ کو سی ایس ایس کے پس منظر کی شفافیت کو مقرر کر سکتے ہیں بجائے 0.3 کی کوئی عددی قدر ہے .3 لکھنے کے لئے کافی ہے:

.block {پس منظر کی تصویر: URL ( img.png)؛ دھندلاپن: .3؛}.

پس منظر کے دھندلاپن قائم کرنے کے لئے، CSS، یہاں تک کہ نویں ورژن ذیل کے IE کے لئے موزوں ہے فلٹر وصف کا استعمال:

.block {پس منظر کی تصویر: URL ( img.png)؛ فلٹر: الفا (دھندلاپن = 30)}.

اس صورت میں، دھندلاپن قیمت کے درمیان 0 اور 100. نوٹ مقرر کیا گیا ہے دھندلاپن RGBA میراث کے ذریعے مختلف شفافیت ترتیبات منسوب ہے کہ: دھندلاپن کا استعمال کرتے ہوئے واضح نہیں صرف پس منظر بن جاتا ہے جب، بلکہ یونٹ کے اندر تمام عناصر.

ہمیشہ CIS براؤزرز اور دیگر تمام ممالک کے لئے آپ کے استعمال کے اعداد و شمار کی نگرانی. تمام DTP کا سب سے بڑا مسئلہ - IE کے پرانے ورژن، وہ آپ کو مکمل حد CSS3 استعمال کرنے کی اجازت نہیں دیتے. ترتیب میں آپ کے براؤزر پر کسی بھی سی ایس ایس جائیداد کی حمایت چاہے چیک کریں کہ اسپیشل سروسز کو استعمال کرنے کے لئے نہیں بھولنا. آپ براؤزر کے پرانے ورژن انسٹال نہیں کر سکتے ہیں، تو ایک خدمت آن لائن سے زیادہ براؤزرز میں ویب سائٹ کے کام کو چیک کریں گے کہ.