مثال
كيفية وضع خلفية صورة:
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
انها محاولة لنفسك » أكثر "Try it Yourself" الأمثلة أدناه.
تعريف واستخدام
الخاصية background-موقف يحدد نقطة الانطلاق لصورة الخلفية.
Tip: افتراضيا، يتم وضع خلفية الصورة في الزاوية العلوية اليسرى من عنصر، وكرر عموديا وأفقيا.
| القيمة الافتراضية: | 0% 0% |
|---|---|
| وارث: | no |
| Animatable: | yes. Read about animatable Try it |
| الإصدار: | CSS1 |
| جافا سكريبت بناء الجملة: | object .style.backgroundPosition="center" Try it |
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل العقار.
| خاصية | |||||
|---|---|---|---|---|---|
| background-position | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Note: IE8 وفي وقت سابق لا تدعم متعددة خلفية الصور على عنصر واحد.
CSS بناء الجملة
background-position:value;قيم الملكية
| القيمة | وصف | العبها |
|---|---|---|
| left top left center left bottom right top right center right bottom center top center center center bottom | إذا كنت فقط تحديد كلمة رئيسية واحدة، ستكون قيمة أخرى "center" | العبها " |
| x% y% | القيمة الأولى هي وضع أفقي والقيمة الثانية هي عمودي. أعلى الزاوية اليسرى هي 0٪ 0٪. الزاوية السفلية اليمنى 100٪ 100٪. إذا قمت بتحديد قيمة واحدة فقط، سوف تكون القيمة 50٪ الأخرى. . القيمة الافتراضية هي: 0٪ 0٪ | العبها " |
| xpos ypos | القيمة الأولى هي وضع أفقي والقيمة الثانية هي عمودي. أعلى الزاوية اليسرى 0 0. وحدات يمكن أن يكون بكسل (0px 0px) أو أي وحدات CSS . إذا قمت بتحديد قيمة واحدة فقط، سوف تكون القيمة 50٪ الأخرى. يمكنك مزيج٪ والمناصب | العبها " |
| initial | تحدد هذه الخاصية إلى قيمته الافتراضية. قرأت عن الأولي | العبها " |
| inherit | يرث هذه الخاصية من عنصر الأم. قراءة حول وراثة |
مزيد من الأمثلة
مثال
كيفية وضع خلفية صورة باستخدام المئة:
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 30% 20%;
}
انها محاولة لنفسك » مثال
كيفية وضع خلفية-الصورة باستخدام بكسل:
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50px 100px;
}
انها محاولة لنفسك » صفحات ذات صلة
درس CSS: CSS الخلفية
CSS إشارة: background-image property
HTML DOM المرجع backgroundPosition property