با استفاده از CSS یک کارت تصویر بسازید که تصویر در حالت عادی واضح باشد و هنگام hover بهصورت تدریجی با استفاده از filter مقدار blur افزایش یافته و brightness و contrast نیز تغییر کنند.
12.0 بازدید آخرین ویرایش در 201 روز قبل ساعت 03:53 0.0
برای حل این مسئله از ویژگی CSS "filter" استفاده کنید و مقادیر مورد نیاز را با توابع blur(px)، brightness(number or %) و contrast(number or %) تعیین کنید؛ برای ایجاد تغییر تدریجی از transition روی عنصر تصویر (یا کانتینر) استفاده کنید و مقدار اولیه و حالت :hover را تنظیم کنید. نیازی به جاوااسکریپت نیست؛ کافی است یک ساختار ساده HTML با تگ img یا بکگراند در یک div داشته باشید و قواعد CSS را روی آن اعمال کنید. نکتهها: برای عملکرد بهتر میتوانید از will-change استفاده کنید، مقادیر blur را متعادل انتخاب کنید (مثلاً 2–8px)، و یادآوری اینکه ترتیب توابع filter معمولاً مهم نیست ولی مقادیر باید با واحد مناسب نوشته شوند.
توسط پژوهشگر در 201 روز قبل ساعت 03:53 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
برای کارت تصویری با CSS از فیلتر filter استفاده کنید تا با hover مقدار blur افزایش یابد و brightness/contrast هم تغییر کنند. مقدار اولیه blur را 0px در نظر بگیرید و در حالت hover به مثلاً blur(6px) brightness(1.2) contrast(1.1) برسد. ترتیب توابع filter معمولاً مهم نیست اما مقادیر را با واحدهای مناسب بنویسید و از transition روی تصویر یا کانتینر برای تغییر تدریجی استفاده کنید. برای بهترین عملکرد از will-change: filter بهره بگیرید و در پشتیبانی مرورگرها، در کنار filter از -webkit-filter هم استفاده کنید. ساختار ساده شامل یک img یا div با background-image کافی است و CSS را روی آن اعمال کنید.
گزارش