styleditor.net styleditor.net styleditor.net styleditor.net English accent-coloralignalignment-baselineallanchoranimationappearanceaspect-ratiobackdrop-filterbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-position-xbackground-position-ybackground-repeatbackground-repeat-xbackground-repeat-ybackground-sizebaselineblock-sizeborderbottomboxbreakcaption-sidecaretclearclipcolorcolumncolumnscontaincontainercontentcornercountercursorcxcyddirectiondisplaydominant-baselinedynamic-range-limitempty-cellsfield-sizingfillfilterflexfloatfloodfontforced-color-adjustgapgridheighthyphenatehyphensimageime-modeinitial-letterinline-sizeinsetinteractivityinterestinterpolate-sizeisolationjustifyleftletter-spacinglighting-colorlinelistmarginmarkermaskmathmaxminmix-blend-modeobjectoffsetopacityorderorphansoutlineoverflowoverlayoverscrollpaddingpagepaint-orderperspectiveplacepointer-eventspositionprint-color-adjustquotesrreadingresizerightrotaterowrubyrulerxryscalescrollscrollbarshapespeakstopstroketab-sizetable-layouttexttimelinetoptouch-actiontransformtransitiontranslatetrigger-scopeunicode-bidiuser-selectvector-effectvertical-alignviewvisibilitywhitewidowswidthwill-changewordwriting-modexyz-indexzoom

מאפיין background-blend-mode

מאפיין זה מגדיר איך לאחד את הרקעים שהוגדרו.
background-blend-mode: multiply; background-image: url('texture.png'), linear-gradient(to right, #e66465, #9198e5); background-blend-mode: overlay;
normalמצב ברירת המחדל — שכבת הרקע העליונה מוצגת כרגיל, ללא כל השפעה על השכבות שמתחתיה. כל פיקסל מוצג בצבעו המקורי.multiplyמכפיל את ערכי הצבע של שכבת הרקע העליונה בערכי הצבע של השכבה שמתחתיה. התוצאה תמיד כהה יותר מהמקוריים — לבן אינו משנה דבר, שחור הופך הכל לשחור.screenההפך מ-multiply: מחשב את ההשלמה של המכפלה. התוצאה תמיד בהירה יותר — שחור אינו משנה דבר, לבן הופך הכל ללבן. יוצר אפקט של שתי שקפיות המוצגות יחד.overlayמשלב בין multiply ו-screen בהתאם לבהירות השכבה התחתונה: אזורים כהים נעשים כהים יותר (multiply), אזורים בהירים נעשים בהירים יותר (screen). מגביר קונטרסט ועושיר צבעים.darkenמשווה בין ערכי הצבע של שתי השכבות ובוחר את הכהה מביניהם לכל ערוץ צבע בנפרד. השכבה המתקבלת תמיד כהה כמו הכהה שבשתיים.lightenמשווה בין ערכי הצבע של שתי השכבות ובוחר את הבהיר מביניהם לכל ערוץ צבע בנפרד. ההפך המדויק של darken — השכבה המתקבלת תמיד בהירה כמו הבהירה שבשתיים.color-dodgeמבהיר את השכבה התחתונה בהתאם לצבע השכבה העליונה, על ידי חלוקת ערך ההשלמה. יוצר אפקט של הארה חזקה מאוד — שחור לא משנה דבר, וצבעים בהירים מייצרים הבהרה דרמטית.color-burnמכהה את השכבה התחתונה בהתאם לצבע השכבה העליונה. ההפך של color-dodge — לבן לא משנה דבר, וצבעים כהים מייצרים כהייה חזקה מאוד ומגבירים את הקונטרסט.hard-lightדומה ל-overlay אך ההחלטה לכהות או להאיר נעשית לפי בהירות השכבה העליונה (ולא התחתונה). אזורים כהים בשכבה העליונה מכהים את התוצאה, אזורים בהירים מאירים אותה — מדמה אפקט של פנס חזק.soft-lightגרסה רכה ועדינה יותר של hard-light. מייצר אפקט של תאורה מפוזרת ועדינה — פחות קונטרסט וקצוות חלקים יותר. אזורים בהירים מוסיפים ברק, אזורים כהים מוסיפים עומק.differenceמחשב את ההפרש המוחלט בין ערכי הצבע של שתי השכבות. אזורים זהים הופכים לשחור, אזורים שונים מקבלים צבעים מנוגדים. שימושי לאיתור הבדלים בין שתי תמונות.exclusionדומה ל-difference אך בעל קונטרסט נמוך יותר ותוצאות רכות יותר. גם כאן אזורים זהים הופכים לאפור במקום שחור, מה שנותן תחושה עדינה ופסיכדלית יותר.hueמיישם את הגוון (hue) של השכבה העליונה תוך שמירה על הרוויה (saturation) והבהירות (luminosity) של השכבה התחתונה. מאפשר לצבוע מחדש אזורים תוך שמירה על המרקם המקורי.saturationמיישם את הרוויה (saturation) של השכבה העליונה תוך שמירה על הגוון והבהירות של השכבה התחתונה. משפיע על עוצמת הצבעים מבלי לשנות את הגוון עצמו.colorמשלב את הגוון והרוויה מהשכבה העליונה עם הבהירות של השכבה התחתונה. שימושי לצביעת תמונות גווני אפור תוך שמירה על פרטי האור והצל.luminosityמיישם את הבהירות (luminosity) של השכבה העליונה תוך שמירה על הגוון והרוויה של השכבה התחתונה. ההפך של color — משנה את עוצמת האור ללא שינוי הצבע. backgrounds W3C Working Draft W3CMDN
Show all code ערוך CSS און-ליין התוסף שזוכר עבורך מאות פריטי CSS כל פרופרטי CSS — בהדגמה חיה מקור הייחוס הדו-לשוני ל-CSS
הגדרהדוגמאותתחבירמודולמפרטסוגי ערכיםמקורות מידעהדגמה חזותית