نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 2057
تاریخ بروزرسانی ۷ اردیبهشت ۱۴۰۱

شفاف کردن تصاویر در css

ایجاد بلاک و تصویر شفاف (Transparent) با استفاده از CSS3

با تیم طراحی سایت اصفهان وب یار همراه باشید تا نحوه شفاف کردن تصاویر در css سایت را بیاموزیم. یکی از قابلیت های دیگری که CSS3 دارد شفاف کردن تصاویر می باشد. در CSS3 از خصوصیت opacity برای شیشه ای کردن تصاویر استفاده می کنیم.

ویژگی opacity در CSS3 رفتارش اینگونه است که هر چقدر مقدارس بالاتر باشد عکس واضح تر و هرچقدر کمتر باشد عکس شفافیت کمتری دارد. این خاصیت میزان شفافیت و وضوح یک عنصر را از صفر تا یک مشخص می کند که صفر به معنای وضوح کامل و یک به معنای عدم وضوح کامل است. مقدار پیش فرض یک است که همان عکس اصلی را نشان می دهد. بنابراین با افزایش مقدار opacity می توان شفافیت یک عکس را کم کرده و کاری کنید که محتوای پشت آن نیز دیده شود.

برای مقدار opacity  علاوه بر عدد بین صفر تا یک ، inherit را هم می توان قرار داد که در این صورت عنصر شفافیت خود را از عنصر مادر (parent) به ارث می برد.

شکل کلی استفاده از این خاصیت به صورت زیر است

opacity: value | inherit ;

در ادامه مثالی از شفاف کردن یک تصویر را برای شما قرار می دهیم


<!DOCTYPE HTML>
<html>
<head>
<style>
Img-opacity{.
Opacity:0.4;
Width:150px;
Height:150px;
</head>
<body>
<img src="1.jpg"   class="img-opacity">
</body>
</html>

1 5 300x200 1       opacity 300x200 1

 

تصویر سمت چپ تصویری است که با opacity 0.4 شفاف سازی شده است اما تصویر سمت راست تصویر اصلی مربوط به قبل از شفاف سازی می باشد. از opacityعلاوه برشفاف کردن تصاویر در css برای شفاف سازی کلیه عناصر هم می توان استفاده کرد.

این خاصیت در مرورگر های کروم ،فایرفاکس ،سافاری ،IE9 به بعد به درستی نشان داده می شود اما مرورگر های IE8به پایین این خاصیت را ساپورت نمی کنند به همین دلیل برای این که به درستی نشان داده شود باید خط زیر را هم به خاصیت Opacity اضافه کرد:

filter:alpha(opacity="y";)

مقدار y می تواند عددی بین صفر تا صد باشد که هرچه عدد به صفر نزدیک تر باشد وضوح بیشتر و هرچه عدد به 100 نزدیک تر باشد وضوح آن بیشتر است .هم چنین برای فایرفاکس های قدیمی تر از 9 هم می توان از کد زیر استفاده کرد.

-moz-opacity:0.4;

راه دیگر شفاف کردن تصاویر در css استفاده از رنگ دهی rgba است که در آن مولفه چهارم یعنی  alfa میزان شفافیت را  نشان می دهدو شیوه کلی کد نویسی آن به شکل زیر است :

background-color:rgba(255،255،255،1);

با تغییر دادن مقدار چهارم و کاهش آن می توانید شفاف سازی را مشاهده کنید.تفاوت آن با روش قبل در این است که شما اگر با opacity   شفاف سازی را انجام دهید متن هم شفاف می شود اما در روش دوم نوشته و هر محتوای دیگری که در داخل عنصر باشد شفاف نشده و تنها عنصری که به آن رنگ  rgba داده و مقدار alfa آن را تغییر داده اید شفافیتش تغییر می کند

در این مطلب فوق سعی بر آن بود که شما را با شفاف کردن تصاویر در css  و عناصر در html آشنا کنیم. تیم  وب یار اصفهان از طراحی سایت اصفهان پاسخ گوی سوالات شما کاربران، طراحان و مدیران عزیز می باشد.

مقالات مرتبط

نشانی ایمیل شما منتشر نخواهد شد.