كيفية جعل صورة كخلفية مع شفافية فوق body دون التاثير على النقر على عناصر الصفحة

يوجد حلّ كأن تضع عناصر مع opacity:0 (غير مرئيين) في الموضع الذي تريد النقر فيه وتضع الوظائف التي تريدها على هذه العناصر غير المرئية.

فيصبح لكل عنصر مرئي تحت الصورة عنصر غير مرئي فوقه يقوم بوظائفه.

لما تعطي العنصر before:: الوضعية الثابتة؟ سوف يؤثر على تموضعه فوق العناصر وبالتالي الوصول اليها. جرب اعطاءه الوضعية المطلقة

before:absolute before:top-0 before:left-0

قد تحتاج في هذا التخلص نهائيا من before:z-[999]

يمكنك ايضا القيام بذلك عن طريق CSS وحدها، يوجد الخاصية background التي تعبر عن تجميعة الخصائص التالية مرتبة:

background-color
background-image
background-repeat
background-attachment
background-position

لنعطيها تدرج لوني شفاف + صورة، يكون كـ:

background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), url(image.jpg)

سينشئ هذا طبقة بيضاء بشفافية نحددها فوق الصورة. سيعطي هذا نفس المقاربة.

قد تحتاج ايضا اسناد هاته الخصائص لظهور كامل للخلفية دون اي مشاكل:

relative bg-fixed bg-center bg-cover bg-no-repeat

  بتاريخ On 12‏/9‏/2022 at 15:59 قال Adnane Kadri:

لما تعطي العنصر before:: الوضعية الثابتة؟ سوف يؤثر على تموضعه فوق العناصر وبالتالي الوصول اليها. جرب اعطاءه الوضعية المطلقة

before:absolute before:top-0 before:left-0

قد تحتاج في هذا التخلص نهائيا من before:z-[999]

يمكنك ايضا القيام بذلك عن طريق CSS وحدها، يوجد الخاصية background التي تعبر عن تجميعة الخصائص التالية مرتبة:

background-color
background-image
background-repeat
background-attachment
background-position

لنعطيها تدرج لوني شفاف + صورة، يكون كـ:

background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), url(image.jpg)

سينشئ هذا طبقة بيضاء بشفافية نحددها فوق الصورة. سيعطي هذا نفس المقاربة.

قد تحتاج ايضا اسناد هاته الخصائص لظهور كامل للخلفية دون اي مشاكل:

relative bg-fixed bg-center bg-cover bg-no-repeat

 

أظهر المزيد  

لم تعمل هذه أخي عدنان ربما لأنني بلفعل أعطيت لعنصر آخر داخل الصفحة التموضع المطلق, ولكن أنا أريد الصورة تبقى ثابتة  أثناء تصفح الموقع لهذا أعطيته التموضع الثابت, هل من حل آخر أخي عدنان ؟ شكرا لك

  بتاريخ On 12‏/9‏/2022 at 15:28 قال معاذ قره محمد:

يوجد حلّ كأن تضع عناصر مع opacity:0 (غير مرئيين) في الموضع الذي تريد النقر فيه وتضع الوظائف التي تريدها على هذه العناصر غير المرئية.

فيصبح لكل عنصر مرئي تحت الصورة عنصر غير مرئي فوقه يقوم بوظائفه.

أظهر المزيد  

جربت أنشأت عنصر كاتالي :

 <div class=" before:absolute before:top-0 before:left-0 h-screen w-screen bg-black opacity-0  z-[998]"></div>

ولم تعمل لكنني لم أفهم فكرة الأخ معاذ جيدا  

  بتاريخ On 12‏/9‏/2022 at 16:19 قال Brahim Semmani:

لم تعمل هذه أخي عدنان ربما لأنني بلفعل أعطيت لعنصر آخر داخل الصفحة التموضع المطلق, ولكن أنا أريد الصورة تبقى ثابتة  أثناء تصفح الموقع لهذا أعطيته التموضع الثابت, هل من حل آخر أخي عدنان ؟ شكرا لك

  بتاريخ On 12‏/9‏/2022 at 15:28 قال معاذ قره محمد:

 

أظهر المزيد  

أظهر المزيد  

بما ان العنصر يمتلك ثابتة، حاول اعطاءه z-index بقيمة اقل من تلك التي يمتلكها body.

z-20 before:z-10

هل يوثر ذلك في ظهورها؟

الصورة تظهر ولكن لما انزل سكرول تبدا في الإختفاء وايضا لا يمكنني الضغط على العناصر التي اسفلها

المشكلة منطقية ولكن هل يوجد حل يخدم مصلحتي ؟

  بتاريخ On 12‏/9‏/2022 at 17:13 قال Brahim Semmani:

الصورة تظهر ولكن لما انزل سكرول تبدا في الإختفاء وايضا لا يمكنني الضغط على العناصر التي اسفلها

المشكلة منطقية ولكن هل يوجد حل يخدم مصلحتي ؟

أظهر المزيد  

لم افهم المشكلة على نحو جيد. هل تحاول تعيين خلفية صورة بشفافية لعنصر body ام تحاول اضافة عنصر صورة شفافة ثابت يظهر كخلفية ثابتة على طول امتداد الصفحة؟

أيوه تماما الشطر الثاني من كلامك أخي عدنان يوضح ما أردته بالضبط

  بتاريخ On 12‏/9‏/2022 at 16:19 قال Brahim Semmani:

لم تعمل هذه أخي عدنان ربما لأنني بلفعل أعطيت لعنصر آخر داخل الصفحة التموضع المطلق, ولكن أنا أريد الصورة تبقى ثابتة  أثناء تصفح الموقع لهذا أعطيته التموضع الثابت, هل من حل آخر أخي عدنان ؟ شكرا لك

جربت أنشأت عنصر كاتالي :

 <div class=" before:absolute before:top-0 before:left-0 h-screen w-screen bg-black opacity-0  z-[998]"></div>

ولم تعمل لكنني لم أفهم فكرة الأخ معاذ جيدا  

أظهر المزيد  

فكرتي أن تضع لمشروعك ثلاث طبقات، طبقة تكون تحت الصورة وهي العناصر الأساسية للمشروع، ثم تليها طبقة الصورة التي ستغطي كامل المحتوى، والطبقة الأخيرة عناصر غير مرئية تكون فوق الصورة بحيث يقابل كل عنصر منها العنصر الظاهر من الطبقة الأولى، كمثال على كلامي:

<div> <!-- محتوى أسفل الصورة -->
	<button id="mainContent">انقر هنا</button>
</div>

<img id="up" src="url"/> <!-- ضع الستايل المناسب للصورة بحيث تعبّئ كامل الصفحة -->
<div> <!-- محتوى فوق الصورة -->
  	<button id="opacityNonContent" onclick="doSomeThing">انقر هنا</button>
</div>

الزر الأول سيكون ظاهر من أسفل الصورة لكن لا يمكنك ضغطه، الزر الثاني سيكون مخفي فوق الصورة لكن يمكنك ضغطه ووضعنا له الحدث onclick فعند النقر عليه سيقوم بتنفيذ الوظيفة doSomeThing وهكذا مع جميع المحتوى.

  بتاريخ On 12‏/9‏/2022 at 17:52 قال Brahim Semmani:

أيوه تماما الشطر الثاني من كلامك أخي عدنان يوضح ما أردته بالضبط

أظهر المزيد  

يحتمل ان هنالك اعدادا افتراضيا آخر عطل ظهور الفكرة لديك.

جرب انشاء عنصر مستقل تماما وطبق عليه التنسيقات اللازمة:

<body>
   <div class="bg"></div>


..

.bg{
 position:fixed; 
 height:100%; 
 width:100%;
 top:0;
 left:0;
 background-image:url(image)
}

ايضا تأكد من امتلاك العنصر body الخلفية الشفافة:

body{
  background-color: transparent;
}

ايضا تغاضى عن استعمال z-index لأنه سيتم وضع العنصر الثابت افتراضا وراء باقي العناصر مما لا يعطل الوصول اليه.

يحتمل ان يحل هذا المشكل لديك.

  بتاريخ On 12‏/9‏/2022 at 18:04 قال Adnane Kadri:

يحتمل ان هنالك اعدادا افتراضيا آخر عطل ظهور الفكرة لديك.

جرب انشاء عنصر مستقل تماما وطبق عليه التنسيقات اللازمة:

<body>
   <div class="bg"></div>


..

.bg{
 position:fixed; 
 height:100%; 
 width:100%;
 top:0;
 left:0;
 background-image:url(image)
}

ايضا تأكد من امتلاك العنصر body الخلفية الشفافة:

body{
  background-color: transparent;
}

ايضا تغاضى عن استعمال z-index لأنه سيتم وضع العنصر الثابت افتراضا وراء باقي العناصر مما لا يعطل الوصول اليه.

يحتمل ان يحل هذا المشكل لديك.

أظهر المزيد  

عفوا أخي عدنان أريده صورة شفافة ثابتة تظر كخلفية ولكن فوق كل العناصر الحل الذي قدمه الأخ معاذ جميل ولكن سأضطر إلى مضاعفة كل مايُنقر في الصفحة