كيفية تحويل صورة خلفية مع CSS

Question

أردت أن أضع حدا حول جدول له صورة خلفية. الحدود تعمل بشكل جيد، ولكن عندما أقوم بذلك (إنها حدود 8Px) تحصل على قطع صورة الخلفية بواسطة الحدود. هل يمكنني تحويل صورة الخلفية لبدء 8px إلى اليمين و 8 بكسل أسفل؟

Answer 1

يمكنك استخدام موقف الخلفية:

background-position: 8px 8px;

Answer 2

يمكنك أيضا استخدام بعض اليد القصيرة.
background: <colour> <image url> <repeat> <left> <top> <scroll>

لكي كنت أفكر في شيء مثل:
background : transparent url(<location to img>) no-repeat 8px 8px scroll;

Answer 3

بدلا من تحويل الصورة يدويا 8px, ، يجب عليك فقط ترسيخ الصورة إلى مربع الحشو (لون أخضر في الرسم البياني أدناه) بدلا من مربع الحدود (الأصفر). سيؤدي القيام بذلك إلى وضع الزاوية العلوية اليسرى من الصورة داخل الحدود بدلا من خلفها.

background-origin: padding-box;

سيؤدي ذلك إلى جعل صيانة أسهل نظرا لأنها ستظل تعمل حتى لو قمت بتغيير عرض الحدود.

يمكنك أيضا تعيين أصل الخلفية إلى مربع المحتوى (أزرق):

background-origin: content-box;

الوثائق / Simple Demo @ MDN