مقتبس من أعمال الآخرين~~~ أشياء جيدة جدًا
موضع الخلفية: الطول ||
موضع الخلفية: الموضع ||.
قيمة الموضع:
length : النسبة المئوية | قيمة طول تتكون من رقم الفاصلة العائمة ومعرف الوحدة.
الموضع: أعلى |. أسفل |. يسار |
.
يضبط أو يسترد موضع صورة خلفية الكائن. يجب تحديد سمة صورة الخلفية أولاً. لا يتأثر موضع الخاصية هذا بإعدادات المساحة المتروكة للكائن.
القيمة الافتراضية هي: 0% 0%. في هذا الوقت، سيتم وضع صورة الخلفية في الزاوية اليسرى العليا من منطقة محتوى الكائن باستثناء الحشو.
إذا تم تحديد قيمة واحدة فقط، فسيتم استخدام هذه القيمة للإحداثي الإحداثي. سيكون الإحداثي الافتراضي هو 50%. إذا تم تحديد قيمتين، فسيتم استخدام القيمة الثانية للإحداثيات.
إذا كانت قيمة الإعداد هي الوسط الأيمن، لأن قيمة الإحداثي المحوري ستحل محل القيمة المركزية، فسيتم وضع صورة الخلفية على اليمين.
خاصية البرنامج النصي المقابلة هي الخلفية.
موقف الخلفية - يحدد
قيمة موضع صورة الخلفية:
[ <نسبة مئوية> |. أعلى |. وسط |.
* مستوى
يسار: يسار
المركز: متوسط
حق: حق
* رَأسِيّ
أعلى: على
المركز: متوسط
الأسفل: التالي
* الجمع بين الرأسي والأفقي
س-% ص-%
x-pos y-pos
: 0% 0%
الميراث : لا
ينطبق على: جميع العناصر
الخلفية: الخلفية. الموضع: الموضع ***************************** النقاط الرئيسية للشرح: <!DOCTYPE html PUBLIC "-/. /W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml " lang="UTF-8">
<الرأس>
<title>مشكلة تحديد موضع الخلفية</title>
<نمط النوع = "نص/CSS">
<!--
*{
الهامش:0;
الحشو: 0؛
}
جسم {
محاذاة النص:مركز؛
الخلفية:#000;
}
#حاوية{
العرض: 1000 بكسل؛
الهامش:0 تلقائي؛
الخلفية:#fff url(images/bg.jpg) الجزء العلوي الأيسر بدون تكرار؛
الارتفاع: 500 بكسل؛
}
-->
</نمط>
</الرأس>
<الجسم>
<div id="container"> </div>
</الجسم>
</html>1.background-position:left top; (انظر الشكل 1). تتم محاذاة الزاوية اليسرى العليا من صورة الخلفية مع الزاوية اليسرى العليا من الحاوية (الحاوية)، ويتم إخفاء الجزء الزائد. أي ما يعادل موقف الخلفية: 0،0؛ ويعادل أيضا موقف الخلفية: 0٪، 0٪؛ 2.background-position: أسفل اليمين (انظر الشكل 2). تتم محاذاة الزاوية اليمنى السفلية لصورة الخلفية مع الزاوية اليمنى السفلية للحاوية، ويتم إخفاء الجزء الزائد. يعادل موضع الخلفية: 100%، 100% أيضًا يعادل موضع الخلفية: عرض الحاوية (الحاوية) - عرض صورة الخلفية، ارتفاع الحاوية (الحاوية) - ارتفاع صورة الخلفية 3. موضع الخلفية: 500 بكسل 15 بكسل؛ (انظر الشكل 3). يتم نقل صورة الخلفية بمقدار 500 بكسل إلى اليمين و15 بكسل إلى الأسفل من الزاوية اليسرى العليا للحاوية، ويتم إخفاء الجزء الزائد. 4.background-position:-500px -15px؛ (انظر الشكل 4). يتم نقل صورة الخلفية بمقدار 500 بكسل إلى اليسار و15 بكسل لأعلى من الزاوية اليسرى العليا للحاوية، ويتم إخفاء الجزء الزائد. 5.background-position:50% 50% (انظر الشكل 5). أي ما يعادل اليسار: {عرض الحاوية - عرض صورة الخلفية} * نسبة اليسار، الجزء الزائد مخفي. أي ما يعادل اليمين: {ارتفاع الحاوية (الحاوية) - ارتفاع صورة الخلفية} * النسبة الصحيحة، الجزء الزائد مخفي. على سبيل المثال: موقف الخلفية: 50% 50%؛ أي موقف الخلفية: (1000-2000)*50%px, (500-30)*50%px; أي أن صورة الخلفية تحرك 500 بكسل إلى اليسار من الزاوية اليسرى العليا للحاوية و235 بكسل إلى الأسفل 6. (في هذه الحالة، يجب أن تكون صورة الخلفية bg2.jpg لرؤية التأثير. ارتفاع bg.jpg؛ صغير جدًا والتأثير غير واضح) موقف الخلفية: -50% -50% (انظر الشكل 6). يعادل اليسار: -{{عرض الحاوية (الحاوية) - عرض صورة الخلفية}*نسبة اليسار (جميع النسب قيم موجبة)}، ويتم إخفاء الجزء الزائد. يكافئ اليمين: -{{ارتفاع الحاوية (الحاوية) - ارتفاع صورة الخلفية}*النسبة الصحيحة (جميع النسب قيم موجبة)}، ويتم إخفاء الجزء الزائد. على سبيل المثال: موقف الخلفية:-50% -50%; موقف الخلفية:-{(1000-500)*50%}px,-{(500-360)*50%}px; - 250 بكسل، -70 بكسل؛ أي أن صورة الخلفية تتحرك بمقدار 250 بكسل إلى اليسار من الزاوية اليسرى العليا للحاوية و70 بكسل لأعلى؛