Eitt af því ómetanlegustu eiginleikum Photoshop-að öllum líkindum, þá eiginleiki sem knúði það fram á keppni, er blandað. Blandunarhamir taka tvennt punkta ofan á hvor aðra og sameina þær á mismunandi vegu, til dæmis mun myrkri litasamsetningin einfaldlega gera dekkri tveggja pixla. Þegar stækkað er yfir heildarskýringu, geta blönduhamir valdið nokkrum töfrandi áhrifum.
Þrátt fyrir að Adobe Photoshop hafi ekki fundið blönduhamir, þá er framkvæmd hennar vissulega mest eftirlifandi. En nú þarftu ekki Photoshop til að stilla myndmálið þitt með þessum hætti, vegna þess að við getum gert allt, virkilega, með CSS3.
Eins og það stendur, vafra stuðningur fyrir CSS ' bakgrunnur-blanda-ham eign er að bæta. Fyrrri útgáfur af vöfrum sem krafist er seljandaforskeyti og eða virkjun tilraunaeiginleika, en caniuse.com skýrslur styðja í núverandi útgáfum af Chrome, Firefox og Opera, með Safari fylgja fljótlega.
Það er engin merki um IE stuðning ennþá, en þar sem blandaðir eru framsæknar aukahlutir getum við byrjað að íhuga að nota þau núna.
There ert a tala af blanda ham valkostur í CSS3 frambjóðandi tilmæli, en gagnlegur í tilgangi okkar er bakgrunnur-blanda ham . Þessi eign gerir okkur kleift að blanda saman tveimur myndum, eða mynd og bakgrunnslit.
Hér er kóðinn sem við þurfum:
Og hér er grunn CSS okkar:
.blend{width:782px;height:540px;background:#3db6b8 url("lighthouse.jpg") no-repeat center center;}Við erum nú tilbúin til að bæta blandunarhamunum.
Til að gera þetta, ætlum við að bæta við öðrum flokki í Div okkar, til dæmis "margfalda":
Og þá munum við búa til annan stílregla:
.blend.multiply{background-blend-mode: multiply;}Ef þú vilt skoða kóðann sem þú getur sækja skrárnar hér.
Margfalda , eins og nafnið gefur til kynna, margfalda grunnpunktinn með blöndu litinni, sem leiðir til dökkari lit. Margfalda svörtu niðurstöðurnar í svörtu og margfalda hvíta skilur myndina óbreytt.
background-blend-mode: multiply;Yfirborð er flókið blandað. Margföldunin fer eftir grunnslitnum: Léttir litir verða léttari, dökkir litir verða dekkri.
background-blend-mode: overlay;The polar andstæða myrkva , léttari lýsir mynd með því að bera saman tvær skarast pixlar og velja léttari þeirra tveggja.
background-blend-mode: lighten;Litur brenna er polar andstæða lit Dodge , það dökkir grunn lit sem leiðir til aukningar í andstæða.
background-blend-mode: color-burn;Mjúk ljós er svipað og harður liti, en í stað þess að margfalda eða skimma litina, notar mjúk ljós til að forðast og brenna fyrir lúmskur áhrif.
background-blend-mode: soft-light;Útilokun er svipuð munur , en það veldur minni andstæðu svo það er aðeins meira nothæft.
background-blend-mode: exclusion;Mettun , eins og litblær , sameinar tvær af gildum grunnlitasins með einum eign blöndu litarinnar, í þessu tilfelli mettuninni.
background-blend-mode: saturation;Luminosity er hið gagnstæða af lit , það sameinar litblær og mettun á grunnslitnum og ljósstyrk blöndu litarinnar.
background-blend-mode: luminosity;