Photoshop rəngi şəffafa dəyişir. CSS-də şəffaf rəng və fon. CSS fonu üçün şəffaflığı təyin edin

Bəzi hallarda, məsələn, veb sayt dizayn edərkən, şəklin fonunun heç bir şəkildə veb saytın rənginə uyğun olmadığı bir vəziyyətlə qarşılaşa bilərsiniz. Aydın həll yolu bu fonu şəffaf etməkdir.

Sizə lazım olacaq

• - Adobe Photoshop.

Təlimatlar

Əsas odur ki, şəkli kompüterinizdə və ya telefonunuzda dəqiqləşdirin və sonra bu səhifənin altındakı OK düyməsini basın. Varsayılan olaraq, şəklin düz fonu şəffaf ilə əvəz olunur. Orijinal təsvirin fon rəngi avtomatik olaraq müəyyən edilir, sadəcə olaraq parametrlərdə onu hansı rənglə əvəz edəcəyinizi qeyd etməlisiniz. Əvəzetmənin keyfiyyətinə təsir edən əsas parametr “Əvəzetmə intensivliyi”dir və hər bir şəkil üçün fərqli ola bilər.

Dəyişmədən və düz fonu şəffaf, ağ və yaşıl rənglərlə əvəz etdikdən sonra çəhrayı gülün fotoşəkilinin nümunəsi:

İlk misalşəffaf fonda qızılgül çiçəyi ilə aşağıdakı parametrlərlə hazırlanmışdır:
  1) Əvəzetmə intensivliyi - 38;
  2) Kenarlar boyunca hamarlama - 5;
  3) Sadə fonu şəffaf fonla əvəz edin;
  4) Kəsmə (<0) или Добавление (>0) kənarlarda - "-70";
  5) İnvert - əlil (yoxlanılmayıb).

Yaratmaq üçün ikinci misal, ağ fonda, "Düz fonu ilə əvəz et" - ağ parametr istisna olmaqla, ilk nümunədəki kimi eyni parametrlər istifadə edilmişdir. IN üçüncü misal, yaşıl fonda, parametrlər də birinci nümunədəki kimi istifadə olunur: “hex formatında rəng” - #245a2d.

Orijinal şəkil heç bir şəkildə dəyişdirilmir. Sizə şəffaf və ya müəyyən edilmiş fon ilə başqa işlənmiş şəkil təqdim olunacaq.

Css-də şəffaf rəngi necə təyin etmək olar? Hazırda bunun 3 yolu var.

Metod 1 - şəffaf dəyər

Mətnin və ya fon rənginin dəyərini şəffaf olaraq təyin etsəniz, rəng tamamilə şəffaf, yəni görünməz olacaqdır. Misal:

Rəng: şəffaf;

Belə mətn səhifədə görünməyəcək.

Metod 2 - rgba rəng rejimi

Və bu bir css3 yeniliyidir. Əvvəllər veb inkişafında belə bir rejim yox idi, yalnız rgb var idi. Şübhəsiz ki, bu formatda rəng yazmağı bilirsiniz. Bunu etmək üçün, üç əsas rəngdən birinin (qırmızı, yaşıl, mavi) doymasını göstərən 0-dan 255-ə qədər mötərizədə üç dəyər göstərməlisiniz. Misal üçün:

Fon: rgb(230, 121, 156);

Rgba formatı fərqli deyil, sadəcə olaraq dördüncü qiymət əlavə edir - elementin şəffaflıq dərəcəsi 0-dan 1-ə qədər. Ümumiyyətlə, bu qeyd formatı tamamilə şəffaf deyil, əsasən şəffaf rəng təyin etmək üçün istifadə olunur. Tam şəffaflığa nail olmaq üçün dördüncü dəyər kimi 0 yazmağınız kifayətdir.

Fon: rgba(0, 0, 0, 0);

Bu halda qalan 3 rəqəm xüsusi rol oynamır.

Dördüncü parametr 0,01-dən 0,99-a qədər bir dəyərə təyin edilərsə, şəffaf rəng təyin edilə bilər. -da fon üçün şəffaflığın təyini haqqında bir az yazdım, maraqlanırsınızsa oxuya bilərsiniz.

Metod 3 - qeyri-şəffaflıq

Css3 texnologiyasından başqa bir xüsusiyyət. Ancaq dərhal xəbərdar etmək istəyirəm ki, bir az fərqli işləyir. Opacity tətbiq olunduğu bütün blokun şəffaflığını təyin edir. Beləliklə, mətnin oxunaqlılığı və şəkillərin qavranılması pisləşir. Beləliklə, mən bu xassədən yalnız mətn və ya hər hansı digər məlumatı ehtiva etməyən bloklar üçün istifadə etməyin mənasını görürəm. Rgba formatında rəng təyin edərkən dördüncü parametrdə olduğu kimi dəyərlər 0-dan 1-ə qədər təyin edilə bilər.

Ümumiyyətlə, hazırda bunlar CSS-də şəffaf rəng təyin etmək üçün bildiyim bütün yollardır. Bunun nə üçün lazım olduğu başqa sualdır. Şəffaf bir fon vasitəsilə altında olanlar görünə bilər. Bəzən dizaynla bu şəkildə etmək lazımdır. Ümumiyyətlə, şəffaflıq texnikası bu gün çox yayılmışdır.

Şəffaf fon

Bildiyiniz kimi, fon fon rəngi təyin etməyə və ya fon kimi fəaliyyət göstərmək üçün şəkil yükləməyə imkan verən CSS xüsusiyyətidir.

CSS fonu üçün şəffaflığı təyin edin

Beləliklə, bütün bunlar rgba kimi rəng qeyd formatı sayəsində çox sadə şəkildə edilir. Qrafik redaktorlarla işləyirsinizsə, yəqin ki, rgb rəng rejiminin dayandığını bilirsiniz: qırmızı (qırmızı) nisbəti, yaşıl (yaşıl) və mavi (mavi) nisbəti. Beləliklə, rgba praktiki olaraq eynidır, yalnız daha bir parametr əlavə olunur - şəffaflıq. Belə yazılıb:

Fon rəngi: rgba(173, 57, 22, 0.5)

Əvvəlcə rəngi rgba rejimində təyin etdiyimizi açıq şəkildə göstəririk. Sonra üç əsas rəngin doyma dəyərlərini 0-dan 255-ə qədər göstəririk, burada 255 ən yüksək doymadır. Dördüncü parametr bizim şəffaflığımızdır. Burada 0-dan 1-ə qədər olan dəyər yazılır. 1 tamamilə qeyri-şəffaf elementdir, 0 isə tamamilə şəffaf elementdir. Müvafiq olaraq, onu 0-a təyin etsəniz, fon rəngi ümumiyyətlə görünməyəcəkdir.

İndi CSS-də fon xüsusiyyətini şəffaflığa necə təyin edəcəyinizi bilirsiniz. Bunun üçün rgba rəng rejimindən istifadə etməlisiniz. Bir qeyri-şəffaflıq xüsusiyyəti də var, lakin o, bütövlükdə bütün elementə aiddir. Yəni qeyri-şəffaflıq tətbiq edilərkən mətnə ​​şəffaflıq tətbiq olunaraq onu oxunmaz hala gətirə bilər.

Şəffaf fon nümunəsi

Şəffaf bir fonun üstünlüklərini bir nümunə ilə göstərmək asandır. Məsələn, bizdə ümumi səhifə fonu var. Bloka bərk qara rəng verilsəydi, belə görünərdi:

İndi bloka eyni qara rəngi təyin edək, lakin onu rgba rəng formatından istifadə edərək, məsələn, sonuncu dəyəri 0,7 olaraq təyin edək. Bu belə çıxacaq:

İndi blokun fonu onun vasitəsilə görünür və fon təsviri onun vasitəsilə görünür. Bu şəkil və fon yalnız məsələndir. Təsəvvür edə bildiyiniz kimi, css-də fon şəffaflığı daxili elementin fonunun digər təbəqələrdə yerləşən digər fonları gizlətmədən görünməsini istədiyiniz zaman faydalı ola bilər.

Rgba istifadə edərək rəngin özünü təyin etmək çətin deyil. Artıq qeyd edildiyi kimi, ilk üç hərf üç əsas rəng deməkdir: qırmızı, yaşıl və mavi, daha doğrusu onların payı (0-dan 255-ə qədər). Fərqli dəyərlər təyin etməklə siz milyonlarla müxtəlif rəng əldə edə bilərsiniz və şəffaflıq, lazım gələrsə, sayt üçün çox daha gözəl effektlər yaratmağa imkan verəcək.