English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
CSS background-position属性设置元素的background-image的初始位置(即原点)。使用简写背景属性通常更方便。
下表总结了此属性的用法上下文和版本历史记录。
| 默认值： | 0% 0% |
|---|---|
| 适用于： | 所有元素 |
| 继承： | 没有 |
| 可动画制作： | 是。请参考 动画属性. |
| 版本： | CSS 1،2،3 |
| JavaScript 语法: | object object.style.backgroundPosition="center" |
属性的语法如下：
background-position: [ percentage | length | left | center | right ] 1 or 2 values | initial | inherit
في المثال أدناه، يتم عرض كيفية استخدام خاصية background-position.
p {
background-image: url("images/smiley.png");
background-position: 50% center;
}التحقق من <</>>ملاحظة:إذا تم تحديد قيمة واحدة فقط، يتم افتراض القيمة الثانية为中ة. إذا تم استخدام قيمتين، فإن القيمة الأولى تمثل الموضع الأفقي، والثانية تمثل الموضع العمودي.
جدول أدناه يصف قيم هذه الخاصية.
| القيمة | الوصف |
|---|---|
| bottom | يساوي 100% من الوضع العمودي. |
| center | إذا لم يُذكر شيء آخر، فإنه يساوي 50% من الوضع الأفقي، وإلا يتم ذكر الموضع الأفقي 50% من الارتفاع. |
| left | يساوي 0% من الوضع الأفقي. |
| right | يساوي 100% من الوضع الأفقي. |
| top | الوضع الرأسي يساوي 0%. |
| length | طول الوحدة الفعلية. على سبيل المثال، باستخدام القيمة “10px 20px”، يتم توجيه الزاوية العلوية للصورة إلى جهة اليمين 10px بعيدًا عن القفص، وفي جهة الأسفل 20px من الزاوية العلوية للقفص. |
| percentage | نسبة حجم العنصر. على سبيل المثال، باستخدام القيمة “0% 0%”، يتم توجيه الزاوية العلوية للصورة إلى الزاوية العلوية للقفص. |
| initial | ضع الخاصية هذه في قيمتها الافتراضية. |
| inherit | إذا تم تحديدها، فإن العناصر ذات الصلة تستخدم قيمة الحساب الخاصية background-position للعنصر الأب. |
توافق متصفح background-position الخاصية، جميع المتصفحات الرئيسية تدعم هذه الخاصية.
|
يرجى الرجوع إلى الدروس التالية:CSS Background,CSS3 Background.
الخصائص ذات الصلة:background,background-attachment,background-color,background-clip,background-image,background-origin,background-repeat,background-size.