تغییر شفافیت تصویر پس‌زمینه با CSS

- visibility ۱ mode_comment

به نام خدا

با استفاده از CSS و CSS3 کار های زیادی میتوان انجام داد ولی تغییر شفافیت(opacity) یک CSS Background Image یکی از آنها نیست. اگر شما اهل خلاقیت باشید راه های خلاقانه ی زیادی هست که بتوانیم با استفاده از آنها کاری کنیم که به نظر برسد شفافیت تصویر بکگراند را تغییر دادیم.

opacity-background

ما در اینجا با استفاده از دو روش این کار را انجام میدهیم.

روش اول: استفاده از absolute position و یک تصویر

در این روش شما به سادگی با استفاده از یک تگ img با absolute position میتوانید آن را ایجاد کنید. باید توجه داشته باشید که تگ های HTML خود را داخل یک container قرار دهید که دارای position: relative; باشد. کدهای HTML به صورت زیر خواهد بود.

CSS:

روش دوم: استفاده از شبه عناصر 

در روش دوم از شبه عناصر کمک میگیریم که شخصاً ترجیح میدهم از روش دوم استفاده کنم. به این صورت که یک div ایجاد میکنیم و به یکی از شبه عناصر :before یا :after اون یک تصویر پس‌زمینه با opacity کمتر از 1 اختصاص میدهیم.

کدهای HTML به صورت زیر خواهد بود.

CSS:

میتونید در پایین دموی هر دو روش رو مشاهده کنید.

 

امیدوارم از این پست استفاده برده باشید.

موفق باشید.

comment دیدگاه کاربران

آموزش جالب و مفیدی بود خیلی ممنونم از سایت 7 لرن

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.