درحال بارگذاری

آموزش CSS | قسمت هفتم "تصویر پس زمینه در CSS"

تاریخ: یکشنبه, 16 شهریور 99

نویسنده: مهرداد نامور... بازیدها: 53 - نظرات : 0 دسته بندی: برنامه نویسی تحت وب


آموزش  CSS : با سلام خدمت تمامی کاربران کلاس برتر در این قسمت آموزشی CSS قصد داریم به آموزش نحوه استفاده از تصاویر در پس زمینه صفحه وب بپردازیم ؛ ما رو تا آخر این مطلب همراهی کنید .

 

 

از پراپرتی بکگراند CSS برای تعریف جلوه های پس زمینه برای عناصر صفحه وب ما استفاده میشود استفاده می شود.

در این فصل از آموزش CSS ، با خصوصیات پس زمینه CSS زیر ، آشنا خواهید شد :

  • رنگ پس زمینه
  • تصویر پس زمینه
  • تکرار پس زمینه
  • پیوست پس زمینه
  • موقعیت پس زمینه

رنگ پس زمینه CSS

ویژگی background-color رنگ پس زمینه یک عنصر را در صفحه وب مشخص می کند .

مثال :

رنگ پس زمینه یک صفحه به این صورت تنظیم می شود :

body {
  background-color: lightblue;
}

امتحان کنید

در CSS ، یک رنگ اغلب توسط مقادیر زیر تغریف می شود :

  • یک نام رنگ معتبر - مانند "قرمز"
  • یک مقدار HEX - مانند "ff0000#"
  • مقدار RGB - مانند "(255،0،0)rgb"

برای آشناییت بیشتر با مقادیر انتخاب رنگ در CSS میتوانید به آموزش "اضافه کردن رنگ به CSS" مراجعه کنید .

 


دیگر عناصر

می توانید رنگ پس زمینه را برای هر عنصر HTML تنظیم کنید :

 

مثال :

در اینجا ، عناصر <h1> ، <p> و <div> دارای رنگ زمینه های مختلف هستند :

h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}

امتحان کنید

 

 


تیرگی و شفافیت ( Opacity / Transparency )

ویژگی opacity میزان کدورت / شفافیت یک عنصر را مشخص می کند. این می تواند یک مقدار از 0.0 - 1.0 را بگیرد . مقدار پایین تر ، شفاف تر :

opacity 1

opacity 0.6

opacity 0.3

opacity 0.1

مثال :

div {
  background-color: green;
  opacity: 0.3;
}

امتحان کنید

نکته : هنگام استفاده از ویژگی opacity برای افزودن شفافیت به پس زمینه یک عنصر ، برای همه عناصر فرزند آن نیز شفافیت یکسانی را به ارمغان می آورد . این می تواند خواندن متن درون یک عنصر کاملاً شفاف را سخت کند .

 


شفافیت با استفاده از RGBA

اگر نمی خواهید برای عناصر فرزند کدری کدورت ایجاد شود ، مانند مثال ما در بالا ، از مقادیر رنگ RGBA استفاده کنید. مثال زیر میزان کدری را فقط برای رنگ پس زمینه و نه متن ، تنظیم می کند :

100% opacity

60% opacity

30% opacity

10% opacity

مثال :

div {
  background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}

امتحان کنید

سعی ما در این این که با بالا بردن سطح دانش برنامه نویسی شما ، کمکی باشیم تا بتوانید به اهداف خود برسید ؛ خوشحال میشیم اگر نظر یا انتقادی دارید در زیر این پست در بخش نظرات با ما در نیان بگذارید .

شاد و سلامت باشید


نویسنده: مهرداد نامور... بازیدها: 53 - نظرات : 0 دسته بندی: برنامه نویسی تحت وب

جستجو
کلاس برتر
ارائه دهنده بهترین و به روز ترین ویدیو های و مقالات آموزشی و همچنین مقالات مختلف در رابطه با تکنولوژی ،معماری ،مدیریت و سایر رشته های کاربردی.ما برای شما بهترین ها را میخواهیم.

سایر خدمات مجموعهخدمات زیر تحت مدیریت برد تخصصی ارائه می شود.
طراحی وب سایت
راه اندازی و پشتیبانی شبکه
هوشمند سازی منازل
افزایش کارایی نیرو انسانی
تعمیرات دستگاه های الکترونیکی
طراحی داخلی
تبلیغات فضای مجازی
برنامه نویسی