لقد أضفت خلفية .svg بنمط خفيف (يتكرر) إلى CSS في قوالبتي، باستخدام الكود التالي:
body {
background:url(https://forums.pickleballist.com/uploads/default/original/1X/b7df60bb8a3fd1584f393dee365865ca83e4906e.svg) center top;
background-size: 300px auto;
}
منطقة .wrap الافتراضية في تثبيت جديد لـ Discourse هي max-width: 1110px;. حاليًا، الخلفية مشتتة قليلاً لنص المحادثة في منتصف الصفحة (منطقة المحتوى الرئيسية).
أود أن يكون العنصر الرئيسي (main-outlet) في المنطقة الوسطى، حيث تجري النصوص والمناقشات، شفافًا بنسبة 0% في المنتصف تمامًا، مما يظهر خلفية بيضاء فقط، ثم تطبيق نوع من التدرج اللوني يزيد تدريجيًا من شفافية خلفتي إلى 100%، مما يظهر الخلفية حول جميع الحواف.
هذا هو شكل خلفتي حاليًا… بشفافية 100%، على كامل الصفحة…
إليك ما أود أن يحدث…
أود أن تكون المنطقة العامة (لا يجب أن تكون دقيقة)، المحددة باللون الأحمر، تحتوي على خلفتي بشفافية 0%، تاركة الخلفية الافتراضية البيضاء تمامًا. (لا أعرف، لكن قد يتطلب ذلك تراكب تدرج لوني أفقي ثنائي الخط على خلفتي ينتقل من #FFFFFF (أبيض) في المنتصف إلى شفاف على الحواف)
صحيح، يُعد تراكب التدرج اللوني هو النهج الأفضل على الأرجح… يمكنك تحديد خلفيتين في آن واحد كما يلي:
body {
background: radial-gradient(circle at center, rgba(255,255,255,1) 35%, rgba(255,255,255,0)) fixed, url(https://forums.pickleballist.com/uploads/default/original/1X/b7df60bb8a3fd1584f393dee365865ca83e4906e.svg) center top / 300px auto ;
background-attachment: fixed;
}
أو إذا كنت تريد هذا التدرج اللوني للخلفية فقط في صفحات المواضيع وليس في الصفحات الأخرى (مثل الملفات الشخصية، وقوائم المواضيع، وما إلى ذلك)… يمكنك وضع النمط على body، ثم وضع تدرج الخلفية فوقه في .archetype-regular #main-outlet { }
كريس! لقد نجح الأمر بشكل رائع (انظر الصورة أدناه)! شكرًا جزيلاً لك على الرد السريع!!
سؤال آخر… من منظور أفضل الممارسات والكفاءة، هل هذه هي أفضل طريقة لتحقيق ما أريد؟ هل هذا الحل هو الأكثر “خفة” وكفاءة؟ أم أن استخدام صورة ثابتة لا تتكرر، أو حل آخر، سيكون أفضل طريقة لتحقيق ما أحاول فعله مع استخدام موارد/نطاق ترددي أقل، وما إلى ذلك؟
تخميني هو أن النمط المتكرر باستخدام تدرج لوني في CSS سيكون هو النهج الأفضل… فالصورة الثابتة ستكون على الأرجح أكبر حجمًا بشكل ملحوظ، وتنزيل ملف أكبر من المرجح أن يكون له تأثير أكبر من أي شيء آخر (سيستهلك بالتأكيد عرض نطاق أكبر من كود CSS الذي ينشئ التدرج اللوني).
︎ باستخدام صورة خلفية ليست SVG، لكنها كانت حبيبية جدًا. أردت صورًا عالية الجودة كخلفية، لذا أنا أستخدم حاليًا ملف SVG.