תמונת רקע עם מסיכת שקיפות

כדי לייצר תמונת רקע עם מסיכת שקיפות, למשל מעבר מחוספס בין אזור אחד לשני, יש להשתמש בקוד CSS ייחודי, ותמונת המסיכה מופרדת.

ברמת העיקרון, האפקט יכול להתקבל עם קובץ PNG שקוף, אך לצערינו הגדלים של קבצים כאלו יכולים להגיע ל-1.5 מגה בקלות, וזה לא גודל סביר לתמונת רקע.

אם כן, יש לשמור את הרקע בתמונת JPG נפרדת, ואת המסיכה בקובץ שחור-שקוף PNG. (שחור זה מה שאנחנו רואים).

לאחר מכן יש להשתמש בקוד הבא כדי להפעיל את המסיכה:

.mask1 {
  -webkit-mask-image: url(https://www.yekevdirect.co.il/wp-content/uploads/2022/09/BKGMask.png);
  mask-image: url(https://www.yekevdirect.co.il/wp-content/uploads/2022/09/BKGMask.png);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

ובקוד הבא כדי להעלות את האזור מעל לאזור הקודם לפניו ולצמצם את המרווח שנפתח מטה כתוצאה:

.mask1 {
  margin-top:-350px;
  z-index:5;
  margin-bottom:-100px;
}