آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

آشنایی بیشتر با 50 ویژگی جالب CSS (جلسه 7) : ویژگی background-blend-mode - قسمت 1

0 290 ۲۶ بهمن ۹۵

css3 attributes

ویژگی background-blend-mode

همونطور که میدونید ما بصورت همزمان میتونیم چندین پس زمینه برای یک المنت قرار بدیم. پس زمینه ها میتونن سه نوع باشن. رنگ خالی یا یک تصویر و یا یک گرادیان. در ابتدا اگر مثلا یک رنگ و یک تصویر رو برای پس زمینه یک المنت قرار بدیم، فقط تصویر به عنوان پس زمینه نشون داده میشه و رنگ تعریف شده، هیچ نقشی نداره. شما میتونین با استفاده از ویژگی background-blend-mode، پس زمینه های یک المنت رو با هم به انواع گوناگون مخلوط کنید و ترکیبی از اونا رو بعنوان پس زمینه قرار بدین. این ویژگی مقادیر زیادی داره که در زیر همگی اونا رو توضیح میدیم و برای هر کدام هم مثالی قرار میدیم تا بهتر با اون آشنا بشید. کد زیر رو در نظر بگیرید:

همونطور که دیدید یک تصویر با استفاده از ویژگی background-image قرار دادیم و بعد از اون هم رنگ پس زمینه رو تقریبا بنفش قرار دادیم. در بالا ویژگی background-blend-mode رو برابر با initial قرار دادیم و این مقدار به معنای این هست که حالت پیش فرض انجام بشه و حالت پیش فرض هم اینه که هیچ ترکیب شدنی در کار نباشه. پس بود یا نبود رنگ پس زمینه در این حالت، هیچ فرقی نمیکنه و خروجی بصورت زیر هست:background-blend-mode-1

میبینید که تصویر مورد نظر نشان داده شده و رنگ هیچ تاثیری بر روی اون نداره. در زیر مقادیر رو با هم بررسی میکنیم.

  • initial : این مقدار، همون مقدار پیش فرض و اولیه هست و در این حالت هیچ ترکیب شدنی در کار نیست
  • inherit : المنت مورد نظر مقدار این ویژگی رو از پدر خودش به ارث میبره
  • normal : با این مقدار، حالت طبیعی انجام میشه و در این حالت رنگ پس زمینه هیچ تاثیری بر روی تصویر نداره و با هم ادغام نمیشن. پس خروجی بصورت زیر هست:background-blend-mode-1
  • multiply : رنگ هر پیکسل تصویر و رنگ پس زمینه بصورت متناظر در هم ضرب میشه و یک رنگ جدید برای اون پیکسل بدست میاد. در اینجا اگر هر پیکسل تصویر بالا رو در رنگ پس زمینه ضرب کنیم، باعث میشه که تصویر ما کلا تیره تر از قبل بشه. اگر میخاید با نحوه محاسبات رنگها بیشتر آشنا بشید، میتونین به این لینک مراجعه کنید. در لینک اشاره شده، تمامی مقادیر موجود برای blend-mode آورده شده و همچنین فرمول محاسبه هر کدوم رو قرار داده. خروجی بصورت زیر میشه:background-blend-mode-2
  • screen : در این حالت اتفاقی که در هر پیکسل میوفته بصورت زیر هست. رنگ تصویر و رنگ پس زمینه هر دو معکوس میشن، در هم ضرب میشن و در آخر دوباره معکوس میشن. با اینکار خروجی بصورت زیر خواهد شد:background-blend-mode-3
  • overlay : این مقدار ترکیبی از دو مقدار screen و multiply هست و فرمول مربوط به خودش رو داره که میتونین در لینک بالا اون رو مشاهده کنید. در این حالت background-image و background-color به نحوی با هم ادغام میشن تا روشنی یا تاریکی پس زمینه رو نمایش بدن و بازتاب کنن. خروجی بصورت زیر هست:background-blend-mode-4
  • darken : در این حالت هر پیکسل رنگ پس زمینه با پیکسل متناظر تصویر مقایسه میشن. هر کدوم که تیره تر باشه انتخاب میشه و درون اون پیکسل قرار میگیره. پس خروجی نهایی بصورت زیر میشه:background-blend-mode-5
  • lighten : این حالت همه چیز مثل بالا هست با این تفاوت که در اینجا اونی که روشن تر هست انتخاب و قرار داده میشه. خروجی بصورت زیر میشه:background-blend-mode-6

در اینجا تعدادی از مقادیر رو توضیح دادیم. در جلسه بعد با ادامه این مقادیر در خدمتتون هستم.

در جلسات بعد با ادامه آموزش در خدمتتون هستیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :