---
url: 'https://dxpr.com/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A5%D8%B9%D8%AF%D8%A7%D8%AF%D8%A7%D8%AA-%D8%A7%D9%84%D8%B9%D9%86%D8%B5%D8%B1/%D8%A7%D9%84%D8%AE%D9%84%D9%81%D9%8A%D8%A9'
title: 'وضع لون أو صورة خلف المحتوى | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:34:33+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  امنحوا شريطًا من صفحتكم لون علامة تجارية أو صورة، فيبرز عنوان ويُقرأ الشريط ككتلة واحدة. تضبطون اللون والصورة في لوحة النمط الخاصة بأي عنصر. ويضيف القسم لوحة تأثيرات الخلفية لصورة ثابتة أو بارالاكس أو تدرج أو فيديو YouTube.
  يتبع الفيديو الوصفة أدناه: يضع صورة خلف عنوان وتدرجًا داكنًا فوق الصورة، فيبقى العنوان الأبيض مقروءًا.
tags:
  - 'Style your elements'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'وضع لون أو صورة خلف المحتوى'
      description: |-
        امنحوا شريطًا من صفحتكم لون علامة تجارية أو صورة، فيبرز عنوان ويُقرأ الشريط ككتلة واحدة. تضبطون اللون والصورة في لوحة النمط الخاصة بأي عنصر. ويضيف القسم لوحة تأثيرات الخلفية لصورة ثابتة أو بارالاكس أو تدرج أو فيديو YouTube.
        يتبع الفيديو الوصفة أدناه: يضع صورة خلف عنوان وتدرجًا داكنًا فوق الصورة، فيبقى العنوان الأبيض مقروءًا.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T14:34:33+0000'
      dateModified: '2026-10-24T17:19:22+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A5%D8%B9%D8%AF%D8%A7%D8%AF%D8%A7%D8%AA-%D8%A7%D9%84%D8%B9%D9%86%D8%B5%D8%B1/%D8%A7%D9%84%D8%AE%D9%84%D9%81%D9%8A%D8%A9'
      articleSection: 'تنسيق العناصر'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A5%D8%B9%D8%AF%D8%A7%D8%AF%D8%A7%D8%AA-%D8%A7%D9%84%D8%B9%D9%86%D8%B5%D8%B1/%D8%A7%D9%84%D8%AE%D9%84%D9%81%D9%8A%D8%A9'
      description: |-
        امنحوا شريطًا من صفحتكم لون علامة تجارية أو صورة، فيبرز عنوان ويُقرأ الشريط ككتلة واحدة. تضبطون اللون والصورة في لوحة النمط الخاصة بأي عنصر. ويضيف القسم لوحة تأثيرات الخلفية لصورة ثابتة أو بارالاكس أو تدرج أو فيديو YouTube.
        يتبع الفيديو الوصفة أدناه: يضع صورة خلف عنوان وتدرجًا داكنًا فوق الصورة، فيبقى العنوان الأبيض مقروءًا.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: الرئيسية
            item: 'https://dxpr.com/ar'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: ar
---
[مركز المساعدة](/ar/hc)/[التوثيق](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82) /[تعلّم DXPR Builder](/ar/hc/documentation/learn-dxpr-builder) /[بناء الصفحات](/ar/hc/documentation/learn-dxpr-builder/build) /[تنسيق العناصر](/ar/hc/documentation/learn-dxpr-builder/element-settings) # وضع لون أو صورة خلف المحتوى.

 تعلّم DXPR Builderبناء الصفحاتتنسيق العناصر

   ## في هذا الدليل

 أدلة ذات صلة

- [تغيير حجم النص ولونه](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A5%D8%B9%D8%AF%D8%A7%D8%AF%D8%A7%D8%AA-%D8%A7%D9%84%D8%B9%D9%86%D8%B5%D8%B1/%D8%A7%D9%84%D8%B7%D8%A8%D8%A7%D8%B9%D8%A9)

امنحوا شريطًا من صفحتكم لون علامة تجارية أو صورة، فيبرز عنوان ويُقرأ الشريط ككتلة واحدة. تضبطون اللون والصورة في لوحة **النمط** الخاصة بأي عنصر. ويضيف القسم لوحة **تأثيرات الخلفية** لصورة ثابتة أو بارالاكس أو تدرج أو فيديو YouTube.

يتبع الفيديو الوصفة أدناه: يضع صورة خلف عنوان وتدرجًا داكنًا فوق الصورة، فيبقى العنوان الأبيض مقروءًا.

  ## قبل أن تبدؤوا

- افتحوا الصفحة في DXPR Builder؛ وتُظهر الإشارة إلى عنصر شريط تحكمه مع **المزيد**. جديدون على المنشئ؟ انظروا [صفحتكم الأولى](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%A8%D8%AF%D8%A1/%D8%A7%D9%84%D8%B5%D9%81%D8%AD%D8%A9-%D8%A7%D9%84%D8%A3%D9%88%D9%84%D9%89).
- **حفظ** في مربع الحوار يُبقي التغيير في المحرّر. و**حفظ** في شريط أدوات المنشئ فوق محتواكم يخزّن الصفحة ويعرض «Saved field».
- **استخدموا قسمًا** لشريط كامل من الصفحة. فالقسم وحده يحوي **تأثيرات الخلفية**.
- **استخدموا عنصر نص أو بطاقة** لصندوق ملوّن خلف بضعة أسطر داخل عمود.
- **استخدموا قالبكم** للخلفيات في كل صفحة، مثل متن الصفحة أو التذييل.
- **أبعدوا الكلمات عن الصورة.** فصورة الخلفية بلا نص بديل، لذا تتخطاها قارئات الشاشة. ضعوا رسالتكم في عنوان فوقها.

## وصفة: عنوان مقروء على صورة

يصعب قراءة النص الأبيض على صورة مزدحمة. والتدرج الداكن فوق الصورة يحل ذلك، ويبقى عاملًا عند تبديل الصورة. تحتاجون قسمًا يحمل عنوانكم في عنصر نص.

1. حوموا فوق **القسم**، وانقروا **المزيد** ثم **الإعدادات**.
2. افتحوا لوحة **النمط** وانقروا **اختيار صورة** تحت **صورة الخلفية**. اختاروا صورة. فتظهر مصغّرة، مع قائمة حجم صورة.
3. في قائمة حجم الصورة، اختاروا حجمًا بعرض أوسع شاشة تصممون لها على الأقل، أو **الصورة الأصلية (دون تغيير حجم)**. وتجنبوا **تحسين للتحميل السريع** لشريط كامل.
4. اضبطوا **نمط الخلفية** على **تغطية** و**موضع الخلفية** على **وسط وسط**.
5. افتحوا لوحة **تأثيرات الخلفية** واضبطوا **تأثير الخلفية** على **التدرج**. فتبقى صورتكم؛ والتدرج يستقر فوقها.
6. في حقل اللون الخاص بـ**لون البداية**، اكتبوا `rgba(0, 0, 0, 0.6)`: الأسود بعتامة 60%. واكتبوا `rgba(0, 0, 0, 0.3)` لـ**لون النهاية**. واتركوا **اتجاه التدرج** على 180، فيجري الحجاب من الأعلى إلى الأسفل.
7. انقروا **حفظ** في مربع الحوار. فيعرض القسم الصورة تحت حجاب داكن.
8. حوموا فوق عنصر **النص**، وانقروا **المزيد** ثم **الإعدادات**. وفي لوحة **النمط** الخاصة به، اضبطوا **لون الخط** على الأبيض وانقروا **حفظ**.
9. انقروا **حفظ** في شريط الأدوات.

تحققوا من العنوان مقابل أفتح جزء في الصورة. استهدفوا تباين 4.5 إلى 1 على الأقل، أو 3 إلى 1 للعناوين الكبيرة؛ وتوضح صفحة [الطباعة](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A5%D8%B9%D8%AF%D8%A7%D8%AF%D8%A7%D8%AA-%D8%A7%D9%84%D8%B9%D9%86%D8%B5%D8%B1/%D8%A7%D9%84%D8%B7%D8%A8%D8%A7%D8%B9%D8%A9) هذه الأهداف. وما زال صعب القراءة؟ ارفعوا القيمتين، مثلًا إلى 0.8 و0.5.

## ما ترونه

يعرض القسم صورتكم تحت حجاب داكن، أشدّه في الأعلى، مع العنوان الأبيض عليه. وتملأ **تغطية** القسم كاملًا، فعلى الشاشة الضيقة يُقطع مزيد من جوانب الصورة.

## كيف تعمل الإعدادات

| عنصر التحكم | ما يفعله |
|---|---|
| **الخلفية** | لون خلف المحتوى. ويجعله منزلق العتامة في المنتقي شفافًا. |
| **صورة الخلفية** | صورة خلف المحتوى: من **اختيار صورة** أو من رابط URL أو من **توليد الصور بالذكاء الاصطناعي** ما لم يطفئه موقعكم. |
| **نمط الخلفية** | كيفية ملء الصورة للعنصر. انظروا الجدول التالي. |
| **موضع الخلفية** | النقطة التي تُثبَّت عليها الصورة. ومع **تغطية**، يحدد أي جزء من الصورة يبقى مرئيًا. |

| **نمط الخلفية** | النتيجة |
|---|---|
| **افتراضيات القالب** | ما لم يقل قالبكم غير ذلك، تتكرر الصورة بحجمها من الزاوية اليسرى العليا. |
| **تغطية** | تملأ الصورة العنصر وتُقطع الحواف التي لا تتسع. الأفضل للصور. |
| **احتواء** | تظهر الصورة كاملة مرة واحدة. وقد تبقى أشرطة فارغة على جانبين. الأفضل للشعارات. |
| **دون تكرار** | نسخة واحدة بحجمها. |
| **تكرار** | تتبلط الصورة عبر العنصر. جيدة للأنماط. |

يستقر اللون تحت الصورة. ويظهر عبر الأجزاء الشفافة من صورة، وفي الأشرطة حول صورة **احتواء**، وأثناء تحميل الصورة. اختاروا لونًا قريبًا من الدرجة الرئيسية للصورة.

الحجم **تحسين للتحميل السريع** يصغّر الصورة إلى 1024 بكسل عرضًا على الأكثر ويحفظها بصيغة WebP. يناسب ذلك صندوقًا، لكنه يبدو ضبابيًا على شريط كامل في شاشة كبيرة.

تُحمّل الصورة نفسها على كل حجم شاشة، بما فيها الهواتف. ولوحة **نمط التحويم** لها **خلفية** و**صورة خلفية** خاصتان بها، فيمكن لصندوق تغيير لونه أو تبديل صورته عند التحويم.

## تأثيرات خلفية القسم

تحتاج هذه التأثيرات إلى قسم. وينقل **الصورة الثابتة** و**صورة بارالاكس** الصورة من **صورة الخلفية**، فاضبطوا الصورة أولًا.

| **تأثير الخلفية** | ما يراه الزوار | الإعدادات |
|---|---|---|
| **صورة بسيطة** | تتمرر الصورة مع الصفحة. وهذا هو الافتراضي. | لا شيء |
| **صورة ثابتة** | تبقى الصورة ثابتة بينما يتمرر المحتوى فوقها. | لا شيء |
| **صورة بارالاكس** | تتمرر الصورة أبطأ من المحتوى. | **سرعة البارالاكس** (0 إلى 100؛ واختيار **صورة بارالاكس** يضبط 20 عندما تكون 0)، **وضع البارالاكس** (**ثابت** أو **محلي**)، **تعطيل على الجوال** (الشاشات دون عرض 481 بكسل) |
| **التدرج** | مزيج لونين، وحده أو فوق الصورة. | **لون البداية** و**لون النهاية** و**اتجاه التدرج** (1 إلى 360 درجة؛ و180 يجري من الأعلى إلى الأسفل) و**موضع البداية** و**موضع النهاية** |
| **فيديو YouTube** | يشتغل فيديو مكتوم بينما القسم على الشاشة ويتوقف مؤقتًا عندما يتمرر بعيدًا. | **رابط فيديو YouTube** و**وقت البدء بالثواني** و**وقت الإيقاف بالثواني** و**خيارات الفيديو** |

فوق صورة، يجري التدرج دائمًا من حافة إلى حافة. ولا ينطبق **موضع البداية** و**موضع النهاية** إلا على تدرج دون صورة.

## إذا لم تظهر لكم الخلفية

- **تظهر الصورة كشريط رفيع.** لا تضيف الخلفية ارتفاعًا؛ فالقسم بطول محتواه وحشوه. أضيفوا محتوى، أو شغّلوا **ارتفاع 100%** في اللوحة **العامة**. ولمزيد من الحشو، اتبعوا [قسمًا أطول](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A5%D8%B9%D8%AF%D8%A7%D8%AF%D8%A7%D8%AA-%D8%A7%D9%84%D8%B9%D9%86%D8%B5%D8%B1/%D8%A7%D9%84%D8%AA%D8%A8%D8%A7%D8%B9%D8%AF#recipe-a-taller-section).
- **تتكرر الصورة أو تعرض زاوية واحدة فقط.** **نمط الخلفية** على **افتراضيات القالب**. اختاروا **تغطية**.
- **تبدو الصورة ضبابية على شاشة عريضة.** **تحسين للتحميل السريع** يجعلها بعرض 1024 بكسل على الأكثر. اختاروا حجمًا أعرض في قائمة حجم الصورة.
- **الصورة مخفية خلف أسود مصمت.** ألوان التدرج بلا شفافية. أنهوا كل قيمة برقم دون 1، مثل `rgba(0, 0, 0, 0.6)`.
- **يبقى العنوان داكنًا.** فئة لون تحت **فئات HTML** الخاصة بعنصر النص، أو قاعدة قالب مع `!important`، تفوز. أزيلوا الرقاقة، أو انظروا [الطباعة](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A5%D8%B9%D8%AF%D8%A7%D8%AF%D8%A7%D8%AA-%D8%A7%D9%84%D8%B9%D9%86%D8%B5%D8%B1/%D8%A7%D9%84%D8%B7%D8%A8%D8%A7%D8%B9%D8%A9).
- **اختفت الخلفية بعد إعادة تحميل الصفحة.** **حفظ** في مربع الحوار يُبقي التغيير في المحرّر فقط. انقروا **حفظ** في شريط الأدوات.
- **اللون لا يظهر.** الصورة تغطيه. ولصبغة فوق الصورة، استخدموا **التدرج** في **تأثيرات الخلفية**.
- **موضع البداية وموضع النهاية لا يغيّران شيئًا.** القسم يحوي **صورة خلفية**، فيجري التدرج من حافة إلى حافة. استخدموا **اتجاه التدرج** وألوانًا شفافة بدلًا من ذلك.
- **لون فئة يفوز.** فئة مثل **خلفية أساسية** تحت **فئات HTML** تتغلب على **الخلفية** الخاصة بكم. أزيلوا رقاقتها.
- **الخلفية لا تفعل شيئًا على العدّاد الدائري أو شريط التقدم أو الفاصل.** تستخدم هذه العناصر ألوانها الخاصة. اضبطوا **لون الخلفية** أو **لون الظهر** أو **اللون** في اللوحة **العامة**.

## ما الخطوة التالية؟

- [الطباعة](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A5%D8%B9%D8%AF%D8%A7%D8%AF%D8%A7%D8%AA-%D8%A7%D9%84%D8%B9%D9%86%D8%B5%D8%B1/%D8%A7%D9%84%D8%B7%D8%A8%D8%A7%D8%B9%D8%A9): اضبطوا لون العنوان على صورتكم وتحققوا من تباينه.