کورس تیبل

CSS اعلیٰ درجہ تعلیم

• سی ای ڈیو سی ایس课外 کتاب
• سی ای ڈیو سی ایس معرفی
• سی ای ڈیو سی ایس بنیادی نحویات
• سی ای ڈیو سی ایس ترقیاتی نحویات
• سی ای ڈیو سی ایس منسوبین انتخاب کنندگان
• سی ای ڈیو سی ایس آئی ڈی انتخاب کنندگان
• سی ای ڈیو سی ایس کلاس انتخاب کنندگان
• سی ای ڈیو سی ایس تخلیق
• سی ای ڈیو سی ایس پس منظر
• سی ای ڈیو سی ایس متن
• سی ای ڈیو سی ایس فونت
• سی ای ڈیو سی ایس فهرست

CSS فیم وائرس

• سی ای ڈیو سی ایس فریم مینگ معرفی
• سی ای ڈیو سی ایس داخلی فاصلہ
• سی ای ڈیو سی ایس حاشیہ
• سی ای ڈیو سی ایس بیرونی فاصلہ
• سی ای ڈیو سی ایس بیرونی فاصلہ ملاپی

CSS پوزیشن

• سی ای ڈیو سی ایس پوزیشن معرفی
• سی ای ڈیو سی ایس مذکورہ پوزیشن
• سی ای ڈیو سی ایس مضبوط پوزیشن
• سی ای ڈیو سی ایس سویچ

CSS چناؤ کی پٹی

• سی ای ڈیو سی ایس عناصر انتخاب کنندگان
• سی ای ڈیو سی ایس انتخاب کنندگان کا گروپ
• سی ای ڈیو سی ایس کلاس انتخاب کنندگان وضاحت
• سی ای ڈیو سی ایس آئی ڈی انتخاب کنندگان وضاحت
• سی ای ڈیو سی ایس نمائش انتخاب کنندگان وضاحت
• سی ای ڈیو سی ایس وارث انتخاب کنندگان
• سی ای ڈیو سی ایس وارث عناصر انتخاب کنندگان
• سی ای ڈیو سی ایس رشتہ دار بھائی برادر انتخاب کنندگان

چناؤ کورس

کورس کی سفارش:

• CodeW3C.com 百宝箱

CSS صاف رنگ کا پس منظر اپنایا جاسکتا ہے اور پس منظر تصویر کا استعمال بھی کرسکتا ہے، تاکہ کافی پیچیدہ اثرات پیدا کئے جاسکیں۔

CSS اس باب میں HTML سے کافی زیادہ صلاحیت کا حامل ہے۔

پس منظر رنگ

کسی بھی طرح سے استعمال کیا جاسکتا ہے background-color کا اترناعلامت کا پس منظر رنگ طے کرنا، اس کا اترنا کسی بھی حلال رنگ کا مطلب ہوتا ہے۔

یہ رول علامت کا پس منظر کو سورف کیا جاتا ہے:

p {background-color: gray;}

اگر آپ چاہتے ہیں کہ پس منظر رنگ علامت کی لکچر کے باہر کم کچھ بڑھ جائے، تو کچھ اندرونی فضاء میں کافی پیداواری کریں:

p {background-color: gray; padding: 20px;}

خود سے کوشش کریں

کسی بھی علامت میں پس منظر رنگ کو طے کیا جاسکتا ہے، یہ شامل بدیع اور اور a جیسے اندرونی علامات بھی ہوتا ہے۔

background-color کا وراثت نہیں ہوتا، اس کا دفعتی قیمت شفاف ہوتا ہے۔شفاف کا مطلب یہ ہوتا ہے کہ اگر کسی علامت میں پس منظر رنگ طے نہیں کیا گیا تو پس منظر شفاف رہتا ہے، تاکہ اس کا اصل پس منظر واضح رہ سکے۔

پرنکشپ اکچو

کسی کے خلف زمین میں تصویر داخل کرنا چاہتا ہے تو background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。

如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：

body {background-image: url(/i/eg_bg_04.gif);}

大多数背景都应用到 body 元素，不过并不仅限于此。

下面例子为一个段落应用了一个背景，而不会对文档的其他部分应用背景：

p.flower {background-image: url(/i/eg_bg_03.gif);}

您甚至可以为行内元素设置背景图像，下面的例子为一个链接设置了背景图像：

a.radio {background-image: url(/i/eg_bg_07.gif);}

خود سے کوشش کریں

理论上讲，甚至可以向 textareas 和 select 等替换元素的背景应用图像，不过并不是所有用户代理都能很好地处理这种情况。

另外还要补充一点，background-image 也不能继承。事实上，所有背景属性都不能继承。

背景重复

如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。

属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。

بندوبست کے طور پر، بک گراؤنڈ تصویر ایک عناصر کی سمت چپ اور بالا سے شروع ہوگا۔ درج ذیل مثال دیکھئے:

body
  { 
  بکگراوند تصویر: یورل(/i/eg_bg_03.gif);
  بکگراوند ریپیٹ: ریپیٹ-ی;
  }

خود سے کوشش کریں

بک گراؤنڈ پوزیشن

استفادہ کرسکتے ہیں بکگراوند پوزیشن اٹریبیوبک گراؤنڈ میں تصویر کی پوزیشن بدلناً

درج ذیل مثال میں بodi عناصر میں ایک بک گراؤنڈ تصویر کو مرکز میں پوزیشن میں رکھا گیا ہے:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    بکگراوند پوزیشن: مرکز;
  }

بکگراوند پوزیشن اٹریبیو کے لئے بہت سے طریقے موجود ہیں۔ ابتدا میں، کچھ کلیدی الفاظ استعمال کئے جاسکتے ہیں: تپ، نیچی، چپ، داہن اور مرکز۔ عام طور پر، یہ کلیدی الفاظ جفت میں آتے ہیں، لیکن یہ طاقتور نہیں ہوتا کہ یہ جفت نہیں آئیں گے۔ ساتھ ہی، طویل مقدار استعمال کئے جاسکتے ہیں، جیسے 100px یا 5cm، آخری طور پر فیصد کی مقدار بھی استعمال کی جاسکتی ہیں۔ مختلف قسم کی مقدار بک گراؤنڈ کے تصویر کی پوزیشن میں بچھت میں بچت رکھتی ہیں۔

کیوکیو

تصویر کی پوزیشن کیوکیو سے واضح سمجھی جاسکتا ہے، جو اس کے نام کے مطابق کام کرتا ہے۔ مثلاً، تاپ رائٹ تصویر کو عناصر کی پیدائش کی右上 کی جگہ پر رکھتا ہے۔

نظام کے مطابق، پوزیشن کیوکیو کسی بھی ترتیب میں آئیں، شرط یہ ہوتی ہے کہ دو کیوکیو سے زیادہ نہیں آئیں - ایک افقی اور ایک عمودی طور پر آئیں。

اگر صرف ایک کیوکیو آئے تو، دوسرا کیوکیو مرکز کا تعین کیا جائے گا。

اس لئے اگر آپ چاہتے ہیں کہ ہر پاراگراف کی وسط میں سے اوپر ایک تصویر آئے، تو صرف اس طرح سے کہنا چاہئیے:

پ
  { 
    بکگراؤنڈ انگریزی تصویر: url('bgimg.gif');
    background-repeat:no-repeat;
    بکگراؤنڈ پوزیشن: تاپ;
  }

ایسے معادل کیوکیو درج ذیل ہیں:

فیصد کی تعداد

فیصد کی تعداد کا نمودار بہت پیچیدہ ہوتا ہے، اگر آپ چاہتے ہیں کہ تصویر عناصر میں وسط میں رکھی جائے، تو اس کارروائی کو آسان طور پر کرسکتے ہیں:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    بکگراؤنڈ پوزیشن: 50% 50%;
  }

یہ تصویر کو مناسب طور پر پوزیشن میں لائے گا، جس کا مرکز عناصر کا مرکز سے تال میل رکھتا ہے۔یعنی، فیصد کی تعداد عناصر اور تصویر دونوں پر استعمال کی جاتی ہے۔یعنی، تصویر میں 50% 50% کا پوائنٹ (مرکز نقطہ) عناصر میں 50% 50% کا پوائنٹ (مرکز نقطہ) سے تال میل رکھتا ہے۔

اگر تصویر 0% 0% کی پوزیشن میں ہو تو، اس کا اُس پائیدار کو عناصر کی پیدائش کی چھوٹی پیدائش کی جگہ پر رکھا جائے گا۔ اگر تصویر کی پوزیشن 100% 100% ہو تو، اس کا اُس پائیدار کو عناصر کی پیدائش کی دوسری پیدائش کی جگہ پر رکھا جائے گا۔

اس لئے اگر آپ کا تصویر افقی طور پر 2/3 کی جگہ اور عمودی طور پر 1/3 کی جگہ پر رکھنا چاہتے ہیں تو، اس طرح سے کہنا چاہئیے:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    بکگراؤنڈ پوزیشن: 66% 33%;
  }

اگر صرف ایک فیصد کی تعداد کو فراہم کیا جائے تو، اس تعداد کو افقی تعداد کے طور پر استعمال کیا جائے گا، اور عمودی تعداد کو 50% کا تعین کیا جائے گا، جو کہ کیوکیو کی طرح سے مشابہ ہوتا ہے。

بکگراؤنڈ پوزیشن کا دفعال یقینی طور پر 0% 0% ہوتا ہے، جو عملی طور پر تپّ لینگ میں مساوی ہوتا ہے۔ اس سے وضاحت ملتی ہے کہ کیونکہ بکگراؤنڈ انگریزی تصویر کی تارچی کیا جانا آپ کی سخت نصب کی گئی پوزیشن کا تعین نہیں کیا جائے تو، یہ کہا جاسکتا ہے کہ یہ کس طرح سے عناصر کی پیدائش میں چھوٹی پیدائش کی جگہ سے شروع ہوتی ہے، مگر آپ نہ کسی دوسری پوزیشن کا تعین نہیں کریں گے。

مقدار کا توضیح

مقدار کا توضیح عناصر کی پرانتز میں اوپر چارہ کی نکاسی کا کیا جائے گا، نکاسی نکاسی کا پوائنٹ تصویر کا اوپر چارہ ہے。

مثلاً اگر 50px 100px کا استعمال کیا جائے، تصویر کا اوپر چارہ کیا جائے گا اور اس کا اوپر چارہ کیا جائے گا، جو عناصر کی پرانتز میں اوپر چارہ کا دفعتی مقدار کی جگہ میں کیا جائے گا، اور اس کا اوپر چارہ عناصر کی پرانتز میں اوپر چارہ کی جگہ میں کیا جائے گا:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
  }

یاد رکھیجئے کہ یہ فیصد کی قیمت سے متفاوت ہے، کیونکہ افقی نکاسی صرف ایک سمت سے دوسری سمت تک ہے۔ یعنی، تصویر کا اپنا اوپر چارہ کیا جائے گا اور اس کا اپنا اوپر چارہ کو پس منظر کی پوزیشن کا دفعتی مقدار میں دی گئی پوائنٹ سے پانچارا جائے گا。

پس منظر مربوط

اگر دستاویز بہت لمبا ہو تو جب دستاویز نازل سارئی جائے تو پس منظر تصویر بھی نازل سارئی جائے گا۔ جب دستاویز کا سارئی تصویر سے زیادہ آگے چل جائے تو تصویر ناپدید ہوجائے گا。

آپ کس طرح سے background-attachment کی دفعتی مقداراس طرح سارئی کو روکنا، اس طریقے سے اس کا استعمال کیا جائے گا کہ تصویر کو مرئی کی سمت کا تعلق رکھا جائے گا (fixed)، لہذا اس میں سارئی کا اثر نہیں پڑیگا:

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }

خود سے کوشش کریں

background-attachment کی دفعتی مقدار scroll ہے، یعنی، میل حال میں پس منظر اس میل میں سارئی جائے گا。

CSS 背景属性

工具箱

CSS 参考手册

CSS 实例

CSS 测验

CSS 教程

赞助商链接