כיצד להציג טקסט על התמונה עם שילוב לערבב CSS3

רקע תמונות נראה נהדר מאחורי טקסטים להציג גדול. עם זאת, יישום CSS שלה לא כל כך פשוט. אנחנו יכולים להשתמש background-clip: טקסט; , אך עדיין מדובר בתכונה ניסיונית ללא תמיכה מספקת בדפדפן.

חלופת CSS כדי להציג רקע תמונה מאחורי טקסט משתמש ב מערבבים- blend מצב נכס. מצבי מיזוג עבור רכיבי HTML הם נתמכים למדי על פני כל שולחן העבודה המודרני ודפדפנים ניידים למעט כמה, כגון Internet Explorer.

פוסט זה, אנחנו הולכים לראות איך מערבבים- blend מצב (שני מצבים שלה במיוחד) עובד, ואיך אתה יכול להשתמש בו להציג טקסט עם רקע התמונה בשני מקרי שימוש:

1. כאשר תמונת הרקע יכול להיראות דרך הטקסט
2. כאשר תמונת הרקע מתרוצץ הטקסט

ראה כמה דוגמאות בהדגמה למטה (תמונות הן מ- unsplash.com).

ה מערבבים- blend מצב מאפיין CSS מגדיר כיצד תוכן וה רקע של אלמנט HTML צריך למזג יחד צבעוני.

יש להסתכל על רשימת מצבי מיזוג, מתוכם נשתמש להכפיל ו מסך בהודעה זו.

ראשית, בואו נסתכל איך אלה שני מצבי תערובת ספציפיים לעבוד.

איך להכפיל & מסך מצבי עבודה

מצבי מיזוג הם מבחינה טכנית לחשב ערך צבע סופי באמצעות רכיבי הצבע של אלמנט ועל הרקע שלו.

ה להכפיל מצב מיזוג

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

ה להכפיל מצב המיזוג מחושב לפי הנוסחה הבאה:

B (Cb, Cs) = Cb × Cs

איפה:Cb - רכיב צבע של הרקעCs - רכיב צבע של אלמנט המקורב - פונקציית מיזוג

מתי Cb ו Cs מוכפלים, הצבע המתקבל הוא שילוב של שני רכיבי צבע אלה, והוא כהה כמו האפלה ביותר של שני הצבעים.

כדי ליצור את תמונת הטקסט שלנו, אנחנו צריכים להתמקד במקרה כאשר Cs (רכיב הצבע של אלמנט המקור) שחור או לבן.

אם Cs J שחור ערכו הוא 0, צבע הפלט יהיה גם שחור, כי Cb × 0 = 0. אז, כאשר האלמנט הוא בצבע שחור, זה לא משנה מה צבע הרקע, כל מה שאנחנו יכולים לראות לאחר מיזוג הוא שחור.

אם Cs J לבן ערכו הוא 1, את צבע הפלט הוא מה Cb הוא, כיCb × 1 = Cb. אז במקרה זה אנחנו רואים את הרקע ישירות כמו שזה.

ה מסך מצב מיזוג

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

בואו לראות במהירות את הנוסחה שלה:

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

מתי Cs J שחור (0), צבע הרקע יוצג לאחר מיזוג, כמו:

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

מתי Cs J לבן (1) התוצאה תהיה לבן עם כל רקע, כמו:

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

1. תמונה המוצגת באמצעות טקסט

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

 
 
מים
 
 

 .backdrop width: 600px; גובה: 210px; background-image: url (someimage.jpg); background-size: 100%; margin: auto;  .text color: black; צבע רקע: לבן; ערבוב- blend מצב: מסך; רוחב: 100%; גובה: 100%; font-size: 160pt; משקל גופן: נועז יותר; text-align: center; line-height: 210px; שוליים: 0;  

בשלב זה הטקסט שלנו נראה למטה, בשלב הבא נוסיף צבע מותאם אישית לרקע.

הוספת צבע

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

כדי להוסיף צבע לאזור שמסביב, הוסף א

אל HTML עבור שכבת-על, ולתת לו צבע רקע עם שקיפות גבוהה. גם להשתמש ערבוב- blend מצב: להכפיל רכוש עבור שכבת העל, כפי שהוא עוזר צבע הרקע של שכבת למזג קצת יותר טוב כאשר התמונה מופיעה בתוך הטקסט.

 
 
מים
 
 
 

 .כיסוי צבע רקע: rgba (0,255,255, .1); ערבוב- blend מצב: להכפיל; רוחב: 100%; גובה: 100%; תפקיד מוחלט top you01;  

בעזרת טכניקה זו, נוכל לצבוע את הסביבה מסביב לטקסט עם רקע התמונה:

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

2. טקסט מוקף ברקע התמונה

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

 .טקסט צבע: לבן; צבע רקע: שחור; ערבוב- blend מצב: מסך; רוחב: 100%; גובה: 100%; font-size: 160pt; משקל גופן: נועז יותר; text-align: center; line-height: 210px; שוליים: 0;  

אתה יכול להשתמש אותו שכבת על כדי להוסיף קצת צבע לטקסט, אלא אם כן אתה רוצה לשמור אותו לבן.

 .כיסוי צבע רקע: rgba (0,255,255, .1); ערבוב- blend מצב: להכפיל; רוחב: 100%; גובה: 100%; תפקיד מוחלט top you01;  

ומתחת תוכל לראות כיצד נראה המקרה ההפוך:

שים לב כי ב- Internet Explorer, או כל דפדפן אחר שאינו תומך מערבבים- blend מצב תכונה, הרקע של התמונה לא יופיע, והטקסט יישאר שחור (או לבן).