تغییر Opacity
سلام. من در حال ساخت یک پروژه تمرینی برای ری اکت هستم و در قسمت هدر سایت وقتی روی آیکون search کلیک میکنم یک div که شامل Input هست پایین هدر نشان داده میشود و در این موقع میخواهم که opacity سایر قسمتهای پیچ کم شود. چون از react router استفاده میکنم چگونه این رو پیاده سازی کنم؟ من از tailwind برای استایل دهی استفاده میکنم
const App = () => {
return (
<BrowserRouter>
<Header />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/account" element={<Account />} />
<Route path="/favorite" element={<Favorite />} />
<Route path="/products" element={<ProductCard/>} />
<Route path="/shop" element={<Shop/>} />
</Routes>
<Footer/>
</BrowserRouter>
);
}گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
سلام
برای این که تمام صفحه opacity کمی داشته باشن و فقط input مربوط به search دیده بشه مثل همین سرچ بالای راکت خودمون که روش کلیک کنی عمل کن کلاس های tailwind هم داره مشخصه
نکتش اینه که به جایی که opacity بقیه رو کم کنی میایی یک لایه (div) میکشی روی کل صفحه و به اون opacity میدی
یک div که طول و عرض 100 داره w-full . h-full و absolute هم باشه
هم input و هم لایه ای که کشیدی رو کل صفحه باید z-index داشته باشن
که راکت به div z-40 داده و به input z-50 ( مهم اینه که عدد input بیشتر باشه همین )
و شما div رو که کل صفحه رو شامل شده میایی یه رنگ کمرنگ با opacity دلخواه خودت میدی همین