كيفية جعل صورة كخلفية مع شفافية فوق 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

بتاريخ 8 ساعات قال 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

 

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

بتاريخ 8 ساعات قال معاذ قره محمد:

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

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

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

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

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

بتاريخ 19 دقائق مضت قال Brahim Semmani:

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

بتاريخ منذ ساعة مضت قال معاذ قره محمد:

 

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

z-20 before:z-10

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

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

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

بتاريخ 34 دقائق مضت قال Brahim Semmani:

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

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

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

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

بتاريخ منذ ساعة مضت قال 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 وهكذا مع جميع المحتوى.

بتاريخ 7 دقائق مضت قال 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 لأنه سيتم وضع العنصر الثابت افتراضا وراء باقي العناصر مما لا يعطل الوصول اليه.

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

بتاريخ 8 ساعات قال 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 لأنه سيتم وضع العنصر الثابت افتراضا وراء باقي العناصر مما لا يعطل الوصول اليه.

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

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