استفاده از شفافیت یا transparency

شیب رنگ در CSS3، شفافیت یا transparency را پشتیبانی می کند، و می توان از آن برای ساخت افکت های محوشدگی استفاده نمود.

برای اضافه کردن شفافیت، ما از تابع ()rgba برای تعریف رنگ ها استفاده می کنیم. آخرین پارامتر در تابع ()rgba شفافیت رنگ را مشخص می کند و عددی بین 0 تا 1 است. (0 نشان دهنده بیشترین شفافیت و 1 نشان دهنده رنگ کامل و بدون شفافیت است)

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

مثال (استفاده از شفافیت یا transparency)

یک شیب رنگ خطی از چپ به راست با transparency:

#grad
{
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari*/
background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11-12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/
}
خودتان امتحان کنید »

آموزش های مرتبط

آموزش CSS3-شیب رنگ