Windows

Photoshop-та ақ түсті қалай мөлдір етуге болады. CSS-тегі мөлдір түс және фон

CSS-де мөлдір түсті қалай орнатуға болады? Қазіргі уақытта мұны істеудің 3 жолы бар.

1-әдіс – мөлдір мән

Мәтінді немесе фон түсін мөлдір етіп орнатсаңыз, түс толығымен мөлдір, яғни көрінбейтін болады. Мысалы:

түсі: мөлдір;

Мұндай мәтін бетте көрінбейді.

2-әдіс - rgba түс режимі

Бұл қазірдің өзінде css3 инновациясы. Бұрын веб-әзірлеуде мұндай режим болған жоқ, тек rgb болды. Сіз бұл форматта түсті қалай жазу керектігін білесіз. Ол үшін 0-ден 255-ке дейінгі жақшада үш негізгі түстің (қызыл, жасыл, көк) біреуінің қанықтылығын көрсететін үш мәнді көрсету керек. Мысалы:

Фон: rgb(230, 121, 156);

Rgba пішімі де ерекшеленбейді, тек төртінші мән қосылады - элементтің мөлдірлік дәрежесі 0-ден 1-ге дейін. Жалпы алғанда, бұл белгілеу пішімі негізінен жартылай мөлдір түсті орнату үшін қолданылады, ал толық мөлдір емес. Толық мөлдірлікке қол жеткізу үшін төртінші мән ретінде тек 0 жазу керек.

Фон: rgba(0, 0, 0, 0);

Бұл жағдайда қалған 3 цифр ерекше рөл атқармайды.

Төртінші параметр 0,01-ден 0,99-ға дейінгі мәнге орнатылған болса, мөлдір түсті орнатуға болады. O ішінде фондық мөлдірлікті орнату туралы біраз жазған, егер сізді қызықтырса, оны оқи аласыз.

3-әдіс – мөлдірлік

Css3 технологиясының тағы бір қасиеті. Бірақ мен бірден ескерткім келеді, бұл сәл басқаша жұмыс істейді. Мөлдірлік кезінде мөлдірлік ол қолданылатын бүкіл блокқа орнатылады. Осылайша, мәтіннің оқылуы және суреттерді қабылдау нашарлайды. Сондықтан мен сипатты тек мәтін және басқа ақпарат жоқ блоктар үшін пайдаланудың мәнін көремін. rgba пішімінде түсті көрсету кезінде төртінші параметрдегідей мәндерді 0-ден 1-ге дейін орнатуға болады.

Жалпы, бойынша осы сәтбұл CSS-де мөлдір түсті орнатудың мен білетін жолдары. Бұл не үшін қажет - бұл басқа сұрақ. Мөлдір фон арқылы оның астында не жатқанын көруге болады. Кейде дизайн бойынша осылай жасау керек. Жалпы, мөлдірлігі бар техника бүгінде өте кең таралған.

Мөлдір фон (фон)

Өздеріңіз білетіндей, фон - бұл фон түсін орнатуға немесе фон ретінде әрекет ету үшін суретті жүктеп салуға мүмкіндік беретін CSS қасиеті.

CSS фоны үшін мөлдірлікті орнату

Сонымен, мұның бәрі rgba сияқты түсті жазу пішімі арқасында өте қарапайым. Егер сіз жұмыс істеп жатсаңыз графикалық редакторлар, онда сіз rgb түс режимі мынаны білдіретінін білетін шығарсыз: қызыл (қызыл) пропорциясы жасыл (жасыл) және көк (көк). Сонымен, rgba дерлік бірдей, тек тағы бір параметр қосылады - мөлдірлік. Ол былай жазылған:

Фон түсі: rgba(173, 57, 22, 0,5)

Біріншіден, біз rgba режимінде түсті орнатып жатқанымызды анық көрсетеміз. Содан кейін біз үш негізгі түстің қанықтылық мәндерін 0-ден 255-ке дейін көрсетеміз, мұнда 255 - ең жоғары қанықтылық. Төртінші параметр – бұл біздің ашықтығымыз. Мұнда мән 0-ден 1-ге дейін жазылады. 1 толық мөлдір емес элемент, ал 0 толық мөлдір элемент. Тиісінше, егер сіз оны 0-ге орнатсаңыз, фон түсі мүлдем көрінбейді.

Енді сіз CSS-те фон сипаты үшін мөлдірлікті қалай орнату керектігін білесіз. Ол үшін rgba түс режимін пайдалану керек. Сондай-ақ бұлыңғырлық қасиеті бар, бірақ ол тұтас элементке қатысты. Яғни, мөлдірлікті қолданған кезде мөлдірлік мәтінге де қолданылуы мүмкін, бұл оны оқылмайтын етеді.

Мөлдір фондық мысал

Мөлдір фонның артықшылықтарын мысалмен көрсету оңай. Мысалы, бізде жалпы бет фоны бар. Егер оған тұтас қара түс берілсе, блок осылай көрінеді:

Ал енді блокқа бірдей қара түсті орнатайық, бірақ оны rgba түс пішімі арқылы көрсетіңіз, мысалы, соңғы мәнді 0,7 деп көрсетіңіз. Ол былай болады:

Енді блоктың фоны мөлдір және фондық сурет ол арқылы көрінеді. Осы суретжәне фон тек көрнекі мақсаттарға арналған. Түсінгеніңіздей, CSS фондық мөлдірлігі басқа қабаттарда орналасқан басқа фондарды жасырмай көрсету үшін кірістірілген элементтің фоны қажет болғанда пайдалы болуы мүмкін.

көмегімен түсті орнатыңыз rgbaқиын емес. Жоғарыда айтылғандай, алғашқы үш әріп үш негізгі түсті білдіреді: қызыл, жасыл және көк, дәлірек айтқанда, олардың үлесі (0-ден 255-ке дейін). Әртүрлі мәндерді орнату арқылы сіз миллиондаған түрлі түстерді ала аласыз, ал мөлдірлік қажет болған жағдайда сайт үшін көптеген әдемі әсерлерді ойлап табуға мүмкіндік береді.

Кейбір жағдайларда, мысалы, сайтты жобалау кезінде сіз суреттің фоны сайттың түсіне қандай да бір түрде сәйкес келмейтін жағдайға тап болуыңыз мүмкін. Айқын шешім - бұл фонды мөлдір ету.

Саған қажет болады

- Adobe Photoshop.

Нұсқау

Adobe Photoshop бағдарламасында қажетті кескінді ашыңыз («Файл» (Файл) -> «Ашу» (Ашу) мәзір тармағы немесе Ctrl + O пернелері). «Таңдау» (Таңдау) -\u003e «Түс ауқымы» (Түс ауқымы) мәзір элементін басыңыз. Түс диапазоны терезесі пайда болады.

«Таңдау» элементін табыңыз, ол терезенің ең жоғарғы жағында орналасқан. Оны басыңыз. Ашылатын мәзірде түстердің немесе реңктердің тобын таңдауға болады, оларды кейінірек мөлдір етуге болады. Анау. тек қызыл, тек жасыл, көк немесе тек ортаңғы реңктер, көлеңкелер және т.б. Бір түсті таңдау үшін меңзерді көрсету қажет болса, осы тармақта «Үлгілер бойынша» көрсетіңіз.

«Шашырау» (бұлыңғырлық) элементін табыңыз - оның көмегімен сіз таңдалатын түстер ауқымын кеңейте аласыз. Төменде «Таңдалған аймақ» және «Сурет» элементтері бар. Біріншісін таңдасаңыз, таңдалған аймақ бағдарламаның алдын ала қарау терезесінде көрсетіледі. Екінші болса, сурет толығымен көрсетіледі.

Терезенің оң жақ бөлігінде тамшуырлар кескіні бар үш түйме бар. Олардың біріншісінде жай тамшуыр, екіншісінде - плюс бар тамшуыр, ал үшіншісінде - минус бар. Біріншісін басып, алдын ала қарау терезесінде немесе құжаттың өзінде мөлдір ету керек түсті басыңыз. Кескіннің қай бөліктері таңдалғанын көру үшін «Таңдалған аумақты» таңдаңыз.

Таңдалған түске басқа түс қосқыңыз келсе, «Пипетка +» түймесін басып, осы түсті басыңыз. Егер сіз оны азайтсаңыз, онда дәл осылай жалғастырыңыз, тек «Пипетка-» көмегімен. Қажетті түсті (немесе түстерді) таңдағаннан кейін OK түймесін басыңыз. Көріп отырғаныңыздай, таңдалған түстер құжатта ерекшеленді.

Қабаттар тізімінде (ол жоқ болса, F7 пернесін басыңыз) басыңыз оң жақ түймешікті басыңызфонға басыңыз, пайда болған мәзірде «Фоннан» таңдаңыз, ал келесі терезеде - бірден OK. Фон қабатқа айналады. Пернетақтада Жою түймесін басыңыз. Таңдалған аумақтар мөлдір болады.

Ең бастысы - компьютерде немесе телефонда суретті көрсету, содан кейін осы беттің төменгі жағындағы OK түймесін басыңыз. Әдепкі бойынша, суреттің қарапайым фоны мөлдірге ауыстырылады. Түпнұсқа кескіннің өң түсі автоматты түрде анықталады, жай ғана параметрлерде оны қандай түспен ауыстыру керектігін көрсету керек. Ауыстыру сапасына әсер ететін негізгі параметр «Ауыстыру қарқындылығы» болып табылады және ол әр сурет үшін әртүрлі болуы мүмкін.

Өзгеріссіз және қатты фонды мөлдір, ақ және жасыл түстермен ауыстырғаннан кейін қызғылт раушанның фотосуретінің мысалы:

Бірінші мысалмөлдір фонда раушан гүлі келесі параметрлермен жасалады:
1) Ауыстыру қарқындылығы – 38;
2) Шетін айналдыра тегістеу - 5;
3) Қатты фонды мөлдірге ауыстырыңыз;
4) Кесу (<0) или Добавление (>0) жиектері бойынша – «-70»;
5) Инверт - өшірілген (белгі қойылмаған).

Жасау үшін екінші мысал, ақ фонмен бірінші мысалдағыдай бірдей параметрлер пайдаланылды, параметрді қоспағанда: «Қарапайым фонды ауыстыру» - ақ. В үшінші мысал, бірге жасыл фон, параметрлер де бірінші мысалдағыдай пайдаланылады, параметрден басқа: "он алтылық форматтағы түс" - #245a2d.

Түпнұсқа кескін ешбір жолмен өзгертілмейді. Сізге мөлдір фон немесе сіз көрсеткен фон бар басқа өңделген сурет беріледі.

1) BMP, GIF, JPEG, PNG, TIFF пішіміндегі кескінді көрсетіңіз:

2) Қатты фонды ауыстыру параметрлері
Ауыстыру жылдамдығы: (1-100)

Жиектерді тегістеу: (0-100) Қарапайым фонды мынамен ауыстырыңыз: мөлдір (тек PNG-24) қызыл қызғылт күлгін көк көгілдір аспан әк жасыл сары қызғылт сары қара сұр ақ немесе алты қырлы түс: Кесу палитрасын ашыңыз (<0) или Добавление (>0) шеттерде: (-100-ден 100-ге дейін)
(Мөлдір фонда таңдаудың айналасында қосымша кесу немесе пиксель қосу қарқындылығы)Таңдауды инверттеу (фонның орнына, алдыңғы планды ауыстырыңыз)