כיצד להכניס תמונה לתמונה באתר

תוכן עניינים:

כיצד להכניס תמונה לתמונה באתר
כיצד להכניס תמונה לתמונה באתר

וִידֵאוֹ: כיצד להכניס תמונה לתמונה באתר

וִידֵאוֹ: כיצד להכניס תמונה לתמונה באתר
וִידֵאוֹ: איך להכניס טקסט לתוך תמונה בפוטושופ עם אפקט מראה מדהים! 2024, מאי
Anonim

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

כיצד להכניס תמונה לתמונה באתר
כיצד להכניס תמונה לתמונה באתר

הוראות

שלב 1

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

שלב 2

באמצעות מנהל הקבצים של מערכת ניהול התוכן או לקוח ה- FTP, הורידו את הקובץ הנדרש למחשב ופתחו בכל עורך גרפיקה - למשל ביישום Paint המותקן עם Windows.

שלב 3

הצב את תמונת החזית על הרקע - בצבע בשביל זה עליך לבחור בפריט "הוסף מ" מתוך הרשימה הנפתחת "הוספה" בכרטיסייה "בית" ולמצוא את הקובץ הנדרש בתיבת הדו-שיח שנפתחת. לאחר מכן התאם את מיקום התמונה שהוכנסה על הרקע הקיים (גרור אותה עם העכבר) ושמור את התוצאה (Ctrl + S).

שלב 4

טען בחזרה את התמונה הערוכה, והחליף את התמונה הישנה. זה משלים את ההליך.

שלב 5

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

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

שלב 6

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

כאן, תכונות הרוחב והגובה קובעות את ממדי התמונה, וארבעת המספרים לאחר הריפוד מציינים את הריפוד בפיקסלים מקצוות המכולה, החל בראש (50) ובהמשך בכיוון השעון (60 - ימינה, 70 - למטה, 80 - משמאל).

שלב 7

הצב את תג img במיכל:

שלב 8

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

מוּמלָץ: