Kā attēlot tekstu uz attēla ar CSS3 maisījuma maisījuma režīmu

Attēlu foni izskatās lieliski aiz lieliem displeja tekstiem. Tomēr tās CSS ieviešana nav tik vienkārša. Mēs varam izmantot fona klips: teksts; īpašums, tomēr tas joprojām ir eksperimentāls līdzeklis bez pietiekama pārlūkprogrammas atbalsta.

CSS alternatīva, lai parādītu attēla fonu aiz teksta, ir izmantojot mix-blend-mode īpašums. HTML elementu apvienošanas režīmi visas modernās darbvirsmas un mobilās pārlūkprogrammas tiek atbalstītas, izņemot dažas, piemēram, Internet Explorer.

Šajā ziņojumā mēs redzēsim, kā mix-blend-mode (divi no tā veidiem) darbojas un kā to izmantot parādīt tekstu ar attēla fonu divos lietošanas gadījumos:

1. kad fona attēls ir redzams izmantojot tekstu
2. kad fona attēls iet apkārt teksts

Skatiet zemāk redzamos demonstrācijas piemērus (attēli ir no unsplash.com).

The mix-blend-mode CSS īpašums nosaka, kā saturu un fona HTML elementam sajauciet kopā ar krāsu.

Aplūkojiet maisīšanas režīmu sarakstu, no kuriem mēs izmantosim reizināt un ekrānā šajā amatā.

Pirmkārt, aplūkosim, kā šie divi specifiskie maisījumu režīmi darbojas.

Kā reizināt & ekrānā maisījuma režīmi

Sajaukšanas režīmi tehniski ir funkcijas aprēķināt galīgo krāsu vērtību izmantojot elementa krāsu komponentus un tā fonu.

The reizināt maisījuma režīmā

Iekš reizināt maisījuma režīmā, ir atsevišķas elementu krāsas un to fona krāsas reizināts, un iegūto krāsu piemēro galīgajai jauktajai versijai.

The reizināt maisījuma režīmu aprēķina pēc šādas formulas:

B (Cb, Cs) = Cb × Cs

kur:Cb - Fona fona komponentsCs - Avota elementa krāsu komponentsB - Sajaukšanas funkcija

Kad Cb un Cs reizina, iegūtais krāsa ir šo divu krāsu komponentu maisījums, un tā ir tumsā kā tumšākā no abām krāsām.

Lai izveidotu mūsu teksta attēlu fonu, mums jākoncentrējas uz lietu, kad Cs (avota elementa krāsu komponents) ir vai nu melnā vai baltā krāsā.

Ja Cs ir melns tās vērtība ir 0, izejas krāsa arī būs melna, jo Cb × 0 = 0. Tātad, kad elements ir melns, tas ir nav svarīgi, kāda ir fona krāsa, viss, ko mēs varam redzēt pēc sajaukšanas, ir melns.

Ja Cs ir balts tās vērtība ir 1, izejas krāsa ir kāda Cb ir, joCb × 1 = Cb. Tātad šajā gadījumā mēs redzam fonu tieši tā kā tas ir.

The ekrānā maisījuma režīmā

The ekrānā maisījuma režīms darbojas līdzīgi kā reizināt maisījuma režīmā ar pretēju rezultātu. Tātad, a melnas priekšplānā parāda fonu tā kā tas ir, un a balta priekšplāna parāda baltu ar jebkuru fonu.

Ļaujiet ātri redzēt tās formulu:

B (Cb, Cs) = Cb + Cs - (Cb × Cs)

Kad Cs ir melns (0), fona krāsa tiks parādīta pēc sajaukšanas, jo:

Cb + 0 - (Cb × 0) = Cb + 0 - 0 = Cb

Kad Cs ir balts (1) rezultāts būs balts ar jebkuru fonu, kā:

Cb + 1 - (Cb × 1) = Cb + 1 - Cb = 1

1. Attēls parādīts, izmantojot tekstu

Lai parādītu tekstu, kas parādās caur tā fona attēlu, mēs izmantojam ekrānā maisījuma režīmā ar melns teksts un balta apkārtējā telpa.

 
 
Ūdens
 
 

 .fons platums: 600px; augstums: 210px; fona attēls: url (someimage.jpg); fona izmērs: 100%; starpība: auto;  .teksts krāsa: melns; fona krāsa: balta; mix-blend-mode: ekrāns; platums: 100%; augstums: 100%; fonta lielums: 160pt; font-weight: bold; teksta saskaņošana: centrs; līnijas augstums: 210px; starpība: 0;  

Pašlaik mūsu teksts izskatās zemāk, nākamajā solī mēs pievienosim fona pielāgoto krāsu.

Krāsas pievienošana

Kā jau tagad esat uzminējis, izmantojot maisījuma režīmus, atstājiet mums tikai divas krāsu izvēles iespējas apgabalā, kas aptver tekstu - melns vai balts. Tomēr ar baltu, ir iespējams pievienot kādu krāsu izmantojot pārklājumu, ja pārklājuma krāsa labi atbilst izmantotajam attēlam.

Lai pievienotu krāsu apkārtnē, pievienojiet a

HTML pārklājumu, un dodiet to fona krāsa ar augstu pārredzamību. Izmantojiet arī mix-blend-mode: reizināt pārklājuma īpašums, jo tas palīdz pārklājuma fona krāsai saplūst nedaudz labāk ar attēlu, kas parādās teksta iekšpusē.

 
 
Ūdens
 
 
 

 .pārklājums fona krāsa: rgba (0,255,255, .1); mix-blend-mode: reizināt; platums: 100%; augstums: 100%; pozīcija: absolūta; tops: 0;  

Izmantojot šo metodi, mēs varam krāsot apkārtējo apkārtni ar attēlu fonu:

Ņemiet vērā, ka tehnika darbojas tikai ar smalkas, caurspīdīgas krāsas. Ja izmantojat pilnīgi necaurspīdīgu krāsu vai krāsu, kas neatbilst attēlam, teksta iekšpusē redzamajam attēlam būs ļoti redzama krāsas krāsa, tādēļ, ja vien tas nav izskats, ko jūs gatavojaties, izvairīties no necaurspīdīgām krāsām.

2. Teksts, ko ieskauj attēla fons

Kaut arī normāls teksta izvietojums virs attēla fona nepieciešama tāda pati tehnika, Es jums parādīšu piemēru, kā izskatās iepriekšminētā demonstrācija efekts ir apgriezts, tas ir, ja teksta krāsa ir balta un fons ir melns.

 .teksts krāsa: balts; fona krāsa: melna; mix-blend-mode: ekrāns; platums: 100%; augstums: 100%; fonta lielums: 160pt; font-weight: bold; teksta saskaņošana: centrs; līnijas augstums: 210px; starpība: 0;  

Varat izmantot tas pats pārklājums lai tekstam pievienotu kādu krāsu, ja vien nevēlaties to saglabāt baltā krāsā.

 .pārklājums fona krāsa: rgba (0,255,255, .1); mix-blend-mode: reizināt; platums: 100%; augstums: 100%; pozīcija: absolūta; tops: 0;  

Un zemāk jūs varat redzēt, kā izskatās pretējs gadījums:

Ņemiet vērā, ka pārlūkprogrammā Internet Explorer vai citā pārlūkprogrammā, kas neatbalsta mix-blend-mode īpašums, attēla fons netiks parādīts, un teksts paliks melns (vai balts).