با تیم طراحی سایت اصفهان وب یار همراه باشید تا نحوه شفاف کردن تصاویر در 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>
تصویر سمت چپ تصویری است که با 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 آشنا کنیم. تیم وب یار اصفهان از طراحی سایت اصفهان پاسخ گوی سوالات شما کاربران، طراحان و مدیران عزیز می باشد.
چرا دانش برنامه نویسی برای هک و امنیت اهمیت دارد؟چه زبانی را برای شروع باید انتخاب کنیم؟ هک واژه ای است که این روز ها برای همه افراد ، به خصوص افرادی که در حوزه IT و فناوری اطلاعات فعالیت می کنند بسیار جالب و هیجان انگیز است. به یک هکر یک اسباب بازی جدید بده، اولین کاری که می کنه جدا کردن قطعاتش و…
این روزها ، داشتن یک صفحه اینستاگرام پر بازدید، آرزوی خیلی‌هاست. در دنیای امروز رسانه‌های اجتماعی به یکی از ابزارهای قدرتمند و پرطرفدار تبدیل شده‌اند و هر روز به میزان محبوبیت آن‌ها افزوده می‌شود. در کشور ما، رسانه اجتماعی اینستاگرام محبوبیت بسیار زیادی دارد و بخش قابل توجهی از ایرانیان در گروه‌های سنی مختلف زمان زیادی را به حضور در این رسانه اختصاص می‌دهند. در…
“اگه برنامه تون درست کار نمی‌کنه اصلاً نگران نشید چرا که اگر همه‌چیز درست کار کنه، شما بیکار می‌شید.” قانون موشر چرا این مقاله را با این جمله معروف از موشر بزرگ شروع کردیم؟ شرکت های طراحی اپلیکیشن ، در بین همه شرکت ها و مجموعه هایی که در زمینه برنامه نویسی فعالیت می کنند ، خدمات بزرگی را به جوامع و کسب و کار…