האם יש תכונת CSS כזאת שנותנת גבול שקוף לתמונת רקע? מה הסינטקס?

אני אישית לא מכיר שום בורדר לתמונות רקע.

מה אתה מנסה לעשות?

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

background-position

לדוגמא:

body{
background:#FFF url(img/myimage) left 10px no-repeat;
}

זה נותן לך מרחק מ10 פיקסלים מלמעלה, אם אני לא טועה מספר שלילי יתן מרחק מלמטה אבל לא ניסיתי.

אם הקונטיינר בעל גובה קבוע אז זה יותר פשוט, צור תמונת רקע קטנה מהקונטיינר ותמקם אותה ב top left.

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

מספר שלילי רק דוחף את התמונה מעבר לגבול העליון של הקונטינר.

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

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

אז div בתוך div.

תמונת הרקע לפנימי וpadding-bottom לחיצוני.

זה לא פיתרון טוב. סורי.

נסה למצוא משהו בלי שינויים במבנה הדף. אם יש יש אם אין אין.

אתה משתמש בbackground-size?

ניסית מספר שלילי לposition וגם overflow:hidden?

איך הדברים האלה עוזרים לי? לשאלתך לא שינית את גודל התמונה.

background-position הוא אותו מאפיין שנמצא background רק לא בכתיב מקוצר.

אני מנסה להבין מה בדיוק אתה עושה כדי לעזור לך.

background-size זו תכונה של CSS3.

נדמה לי שאני יודע בדיוק מה זה background-position ולכן כתבתי את זה בצורה הזאת.

אתה אומר שהקונטיינר שלך בעל גובה דינמי, לכן כדי לכסות את כל הגובה יש שתי אפשרויות: background-repeat ל patterns או:

background-size:100% 90%;

אני לא כל כך מבין איך הוספת פס שקוף לתמונה תעזור בלי הנ"ל.

אם כבר משתמשים בCSS3, אז שווה להציץ גם על multiple-backgrounds.

זה יכול להיות פתרון אלגנטי (כמובן שהבעיה היא בIE6-8).

מקווה שעכשיו אני יותר מובן.

זה קונטינר עם overflow hidden. הקונטינר הוא עם מספר רקעים, התמונה מכסה רק חלק קטן מהקונטיינר.

גבול שקוף יעזור לי מכיוון שאוכל לקבוע את המיקום LEFT BOTTOM והפיקסלים שנוספו ירחיקו אותו מהתחתית.

באיזה דפדפן מינימום זה אמור לתמוך? לפי זה יהיה אפשר באילו מאפיינים של CSS אפשר להשתמש.

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

למשל: הוספת padding-bottom והגדרת background-origin תהיה בסדר? ואולי בכלל יש כבר padding-bottom לאובייקט? אני לא יכול לדעת.

אם אני מבין נכון, מדובר בתמונה קטנה עם no-repeat שאמורה להיות למטה? אם כן, למה לא להשתמש בimg עם position:absolute?

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

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

background-origin עם padding זאת עצה טובה שתעבוד אבל זה ישפיע על שאר הרקעים בקונטינר.

מבנה הדף זה ה DOM.

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

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

גם הדוגמה שנתתי עם background-origin נתמכת רק בדפדפנים חדשים יחסית.

אני לא מחפש פתרונות אלטנרטיבים

שימוש בimg הוא לא "פיתרון אלטרנטיבי" למקרה שתיארת, אלא דווקא הצורה הטבעית יותר (לדעתי) לעשות את מה שהבנתי שאתה מנסה לעשות. דווקא שימוש בbackground הוא הסתבכות מיותרת.

מבנה הדף זה ה DOM.

אתה מתכוון שאין אפשרות לשנות או להוסיף אלמנטים של HTML אבל אפשר להשתמש באיזה מאפייני CSS שרוצים (בהנחה שזה לא מקלקל את הדף כמובן)?

background-origin עם padding זאת עצה טובה שתעבוד אבל זה ישפיע על שאר הרקעים בקונטינר.

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

אם אתה מתכוון שזה ישפיע על רקעים של אלמנטים שנמצאים בתוך הקונטיינר, זה לא אמור לקרות. background-origin לא עובר בירושה, ו-padding-bottom לא רלוונטי לתוכן במקרה של overflow:hidden. אשמח אם תסביר לי למה אתה מתכוון.

כמו שאמרתי הדפדפן לא חשוב שתמש ב specification הכי עדכני שיש.

בנוגע ל DOM. חיובי.

מספר רקעים אתה יכול להסתכל כאן http://www.css3.info/preview/multiple-backgrounds/

לא חשוב... כנראה שאין דרך טובה אחרת כבר הייתי מוצא אותה.

אני פשוט יוסיף את הפיסקלים לתמונה וזהו, נראה כמו הפתרון הכי פרקטי.