#main ( موقعیت: نسبی؛ ) #main:after ( محتوا: ""؛ نمایش: بلوک؛ موقعیت: مطلق؛ بالا: 0؛ سمت چپ: 0؛ تصویر پس زمینه: url(/wp-content/uploads/2010/11 /tandem.jpg؛ عرض: 100%؛ ارتفاع: 100%؛ کدورت: 0.2؛ z-index: -1؛ )

سلام به همه. همانطور که می دانید پس زمینه یک ویژگی CSS است که به شما امکان می دهد رنگ پس زمینه یا آپلود یک تصویر را به عنوان پس زمینه تنظیم کنید. CSS3 همچنین قابلیت ایجاد گرادیان های خطی و شعاعی را معرفی کرد، اما این موضوع برای یک مقاله جداگانه است. در همان یکی، می‌خواستم به شما بگویم که چگونه برای ویژگی پس‌زمینه در css شفافیت تنظیم کنید.

شفافیت را برای پس زمینه css تنظیم کنید

بنابراین، همه اینها به لطف فرمت ضبط رنگی مانند rgba بسیار ساده انجام می شود. اگر با ویرایشگرهای گرافیکی کار می کنید، احتمالاً می دانید که حالت رنگ rgb به صورت زیر رمزگشایی می شود: نسبت قرمز (قرمز)، نسبت سبز (سبز) و آبی (آبی). بنابراین ، rgba تقریباً یکسان است ، فقط یک پارامتر دیگر اضافه شده است - شفافیت. اینگونه نوشته شده است:

رنگ پس‌زمینه: rgba (173، 57، 22، 0.5)

ابتدا به صراحت نشان می دهیم که رنگ را در حالت rgba تنظیم می کنیم. سپس مقادیر اشباع سه رنگ اصلی را از 0 تا 255 نشان می دهیم، جایی که 255 بالاترین اشباع است. پارامتر چهارم شفافیت ماست. در اینجا مقدار از 0 تا یک نوشته می شود. 1 یک عنصر کاملاً مات و 0 یک عنصر کاملاً شفاف است. بر این اساس، اگر آن را روی 0 قرار دهید، رنگ پس زمینه به هیچ وجه قابل مشاهده نخواهد بود.

اکنون می دانید که چگونه برای ویژگی پس زمینه در css شفافیت تنظیم کنید. برای این کار باید از حالت رنگ rgba استفاده کنید. یک ویژگی opacity نیز وجود دارد، اما برای کل عنصر به عنوان یک کل اعمال می شود. یعنی هنگام اعمال opacity می توان شفافیت را نیز روی متن اعمال کرد که باعث ناخوانایی آن می شود.

مثال پس زمینه شفاف

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

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

تنظیم رنگ به خودی خود با استفاده از rgba دشوار نیست. همانطور که قبلا ذکر شد، سه حرف اول به معنای سه رنگ اصلی: قرمز، سبز و آبی یا بهتر است بگوییم سهم آنها (از 0 تا 255) است. با تنظیم مقادیر مختلف می توانید میلیون ها رنگ مختلف دریافت کنید و شفافیت به شما این امکان را می دهد که در صورت لزوم افکت های زیبای زیادی برای سایت داشته باشید.

CSS از ویژگی opacity برای ایجاد یک افکت شفاف استفاده می کند.

IE8 و نسخه‌های قبلی از یک ویژگی جایگزین پشتیبانی می‌کنند - filter:alpha(opacity=x)، که در آن "x" می‌تواند مقداری از 0 تا 100 بگیرد، هر چه مقدار کوچک‌تر باشد، عنصر شفاف‌تر خواهد بود.

همه مرورگرهای دیگر از استاندارد پشتیبانی می کنند ویژگی CSS opacity، که می تواند عددی از 0.0 تا 1.0 را به عنوان مقدار در نظر بگیرد، هر چه مقدار کوچکتر باشد، عنصر شفاف تر خواهد بود:

تلاش كردن "

شفافیت شناور

Pseudo-class:hover به شما امکان تغییر را می دهد ظاهرعناصر هنگامی که با نشانگر ماوس روی آنها قرار می گیرند. ما از این ویژگی برای از دست دادن شفافیت تصویر هنگام شناور استفاده خواهیم کرد:

تلاش كردن "

شفافیت پس زمینه

دو تا هستند راه های ممکنعنصر را شفاف کنید: ویژگی opacity که در بالا توضیح داده شد و رنگ پس‌زمینه را با فرمت RGBA مشخص کنید.

شاید قبلاً با مدل نمایش رنگ RGB آشنا شده باشید. RGB (قرمز، سبز، آبی - قرمز، سبز، آبی) - یک سیستم رنگی است که رنگ را با ترکیب قرمز، سبز و آبی تعیین می کند. به عنوان مثال، برای تنظیم رنگ متن روی زرد، می توانید از هر یک از اعلان های زیر استفاده کنید:

رنگ: rgb(255,255,0); رنگ: rgb(100%,100%,0);

رنگ های مشخص شده با RGB متفاوت خواهد بود مقادیر هگزادسیمال، که تا به حال از آن استفاده کرده ایم که به ما امکان استفاده از کانال آلفای شفافیت را می دهند. این بدان معنی است که آنچه در زیر است از طریق پس زمینه یک عنصر با شفافیت آلفا نشان داده می شود.

اعلان رنگ RGBA از نظر نحو شبیه به قوانین استاندارد RGB است. با این حال، در میان چیزهای دیگر، باید مقدار را به عنوان RGBA (به جای RGB) اعلام کنیم و یک مقدار شفافیت اعشاری اضافی را بعد از مقدار رنگ بین 0.0 (کاملا شفاف) و 1 (کاملاً مات) تنظیم کنیم.

رنگ: rgba(255,255,0,0.5); رنگ: rgba(100%,100%,0,0.5);

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

متن (تصویر پس‌زمینه: url(img.jpg)؛ .prim1 (عرض: 400 پیکسل؛ حاشیه: 30 پیکسل 50 پیکسل؛ رنگ پس‌زمینه: #ffffff؛ حاشیه: 1 پیکسل سیاه و سفید؛ وزن قلم: پررنگ؛ کدورت: 0.5؛ فیلتر : alpha(opacity=70); /*برای IE8 و نسخه های قبلی*/ text-align: center; ) .prim2 (عرض: 400px؛ حاشیه: 30px 50px؛ پس زمینه رنگ: rgba(255,255,255,0.5)؛ حاشیه: 1px ثابت سیاه؛ وزن فونت: پررنگ؛ تراز متن: مرکز؛ ) امتحان کنید »

توجه: مقادیر RGBA در IE8 و بالاتر پشتیبانی نمی‌شوند نسخه های اولیه. برای اعلام بازگشت رنگ برای مرورگرهای قدیمی که از مقادیر رنگی با کانال های آلفا پشتیبانی نمی کنند، ابتدا آن را قبل از مقدار RGBA مشخص کنید: پس زمینه: rgb(255,255,0); پس زمینه: rgba(255,255,0,0.5);