Tekstin näyttäminen kuvassa CSS3-sekoitus-sekoitustilassa

Kuvan taustat näyttävät hyvältä suurten näyttötekstien takana. Sen CSS-toteutus ei kuitenkaan ole niin yksinkertaista. Voimme käyttää taustaklipsi: teksti; ominaisuus, mutta se on edelleen kokeellinen ominaisuus ilman riittävää selaintuen käyttöä.

CSS-vaihtoehto näyttää kuvan taustan tekstin takana käyttämällä mix-sekoitus-tilassa omaisuus. HTML-elementtien sekoitusmoodit tukevat kaikkia nykyaikaisia ​​työpöytä- ja mobiililaitteita lukuun ottamatta muutamia, kuten Internet Exploreria.

Tässä viestissä näemme miten mix-sekoitus-tilassa (kaksi sen tilaa) toimii ja miten voit käyttää sitä näyttää tekstin taustalla kahdessa käyttötapauksessa:

1. kun taustakuva voidaan nähdä tekstin kautta
2. kun taustakuva juoksee ympäriinsä teksti

Katso esimerkkejä alla olevasta demosta (kuvat ovat osoitteesta unsplash.com).

mix-sekoitus-tilassa CSS-ominaisuus määrittää, miten pitoisuus ja taustaa HTML-elementin pitäisi sekoita yhteen väriltään.

Tutustu sekoitusmuotojen luetteloon, josta käytämme lisääntyä ja kuvaruutu tässä viestissä.

Tarkastellaan ensin, miten nämä kaksi erityistä sekoitusmoodia toimivat.

Millä tavalla lisääntyä & kuvaruutu sekoitusmoodit toimivat

Sekoitusmoodit ovat teknisesti toimintoja laskea lopullinen väriarvo käyttämällä elementin värikomponentteja ja sen taustaa.

lisääntyä sekoitus-tilassa

Vuonna lisääntyä sekoitustilassa, elementtien yksittäiset värit ja niiden taustakuvat ovat kerrottuna, ja tuloksena olevaa väriä sovelletaan lopulliseen sekoitettuun versioon.

lisääntyä sekoitusmuoto lasketaan seuraavan kaavan mukaisesti:

B (Cb, Cs) = Cb × Cs

missä:cb - Taustan värikomponenttics - Lähteen elementin värikomponenttiB - Sekoitustoiminto

Kun cb ja cs kerrotaan, tuloksena oleva väri on näiden kahden värikomponentin sekoitus, ja se on yhtä tumma kuin kahden värin pimein.

Tekstikuvan taustan luomiseksi meidän on keskityttävä tapaukseen, kun cs (lähdeelementin värikomponentti) on joko musta tai valkoinen.

Jos cs on musta sen arvo on 0, tulostusväri on myös musta, koska Cb × 0 = 0. Joten, kun elementti on värillinen musta, se ei ole väliä mitä väriä taustalla on, kaikki, mitä voimme nähdä sekoittamisen jälkeen, on musta.

Jos cs on valkoinen sen arvo on 1, tulostusväri on mitä tahansa cb on koskaCb × 1 = Cb. Tässä tapauksessa näemme taustan suoraan niin kuin se on.

kuvaruutu sekoitus-tilassa

kuvaruutu sekoitusmoodi toimii samalla tavalla kuin lisääntyä sekoitus-tilassa, mutta vastakkainen tulos. Joten, a musta etuala näyttää taustan niin kuin se on, ja a valkoinen etualalla näkyy valkoinen millä tahansa taustalla.

Katsotaanpa nopeasti sen kaavaa:

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

Kun cs on musta (0), taustaväri näkyy sekoittamisen jälkeen, kuten:

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

Kun cs on valkoinen (1) tulos on valkoinen ja taustalla on:

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

1. Kuvassa näkyy teksti

Jos haluat näyttää taustakuvan kautta näkyvän tekstin, käytämme kuvaruutu sekoitus-tilassa kanssa musta teksti ja valkoinen ympäröivä tila.

 
 
vesi
 
 

 .tausta leveys: 600px; korkeus: 210px; taustakuva: url (someimage.jpg); taustakoko: 100%; marginaali: auto;  .teksti väri: musta; taustaväri: valkoinen; mix-blend-mode: näyttö; leveys: 100%; korkeus: 100%; fonttikoko: 160pt; kirjasinpaino: rohkeampi; text-align: center; linjan korkeus: 210px; marginaali: 0;  

Tällä hetkellä teksti näyttää alla, seuraavassa vaiheessa lisätään taustalle mukautettuja värejä.

Värien lisääminen

Kuten olet ehkä arvannut jo nyt, sekoitusmuotojen käyttäminen jättää meille vain kaksi värivalintaa alueelle, joka ympäröi tekstiä - musta tai valkoinen. kuitenkin valkoinen, siihen on mahdollista lisätä väriä käyttämällä peittokuvaa, jos päällekkäinen väri sopii hyvin käytetyn kuvan kanssa.

Jos haluat lisätä väriä ympäröivälle alueelle, lisää a

HTML-koodiin päällekkäin, ja anna sille a taustaväri, jossa on suuri läpinäkyvyys. Käytä myös mix-blend-mode: kerro peittokuvan ominaisuus, koska se auttaa peittokuvan taustaväriä sekoita hieman paremmin kuva näkyy tekstin sisällä.

 
 
vesi
 
 
 

 .peite taustaväri: rgba (0,255,255, .1); mix-blend-mode: kerro; leveys: 100%; korkeus: 100%; asema: absoluuttinen; alkuun: 0;  

Tällä tekniikalla voisimme värittää ympäröivän alueen tekstin ympärille kuvan taustalla:

Huomaa, että tekniikka toimii hyvin vain hienovaraiset läpinäkyvät värit. Jos käytät täysin läpinäkymättömää väriä tai väriä, joka ei vastaa kuvaa, tekstin sisällä olevalla kuvalla on hyvin näkyvä värisävy, joten ellei se näytä, välttää läpinäkymättömiä värejä.

2. Kuvan taustalla oleva teksti

Vaikka normaali tekstin sijoittaminen kuvan taustalle vaatii saman tekniikan, Näytän sinulle esimerkin siitä, miten edellä esitetty demo näyttää, kun vaikutus on päinvastainen, eli kun tekstin väri on valkoinen ja tausta on musta.

 .teksti väri: valkoinen; taustaväri: musta; mix-blend-mode: näyttö; leveys: 100%; korkeus: 100%; fonttikoko: 160pt; kirjasinpaino: rohkeampi; text-align: center; linjan korkeus: 210px; marginaali: 0;  

Voit käyttää sama peite lisätäksesi väriä tekstiin, ellet halua pitää sitä valkoisena.

 .peite taustaväri: rgba (0,255,255, .1); mix-blend-mode: kerro; leveys: 100%; korkeus: 100%; asema: absoluuttinen; alkuun: 0;  

Alla näet, miten käänteinen tapaus näyttää:

Huomaa, että Internet Explorerissa tai muussa selaimessa, joka ei tue mix-sekoitus-tilassa ominaisuus, kuvan tausta ei näy, ja teksti jää mustaksi (tai valkoiseksi).