طراحی سایت اصفهان | سئو سایت اصفهان |طراحی سایت در اصفهان

031- 344 500 60

طراحی سایت در اصفهان, سئو سایت اصفهان, طراحی سایت فروشگاهی , شرکت طراحی سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی و تبلیغات اینترنتی

صفحه نخست » بلاگ » css » شفاف کردن تصاویر در css

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

۱۲ام تیر ۱۳۹۷
مائده عشقی
23

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

یکی از قابلیت های دیگری که css3 دارد شفاف کردن تصاویر می باشد اگر شما هم مایل به شفاف کردن تصویری در سایت خود هستید اما روش آن را نمی دانید با تیم وب یار  از طراحی سایت در اصفهان همراه باشید

شفاف کردن تصاویر  در cssرا می توان با خاصیت opacity انجام داد به طوری که هر چقدر مقدار بالاتری داشته باشد عکس واضح تر است و هرچقدر کمتر باشد عکس شفافیت کمتری دارد .این خاصیت میزان شفافیت و وضوح یک عنصر راازصفر  تا یک مشخص می کند که صفر به معنای وضوح کامل و یک به معنای عدم وضوح کامل است مقدار پیش فرض یک ست که همان عکس اصلی را نشان می دهد  بنابراین با کاهش مقدار 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 آشنا کنیم. تیم  وب یار اصفهان از طراحی سایت اصفهان  پاسخ گوی سوالات شما کاربران ، طراحان و مدیران عزیز می باشد.

­­

 

 

 

درباره نویسنده :
مائده عشقی

مطالب مرتبط

طراحی سایت اصفهان

ساخت گالری تصاویر در CSS

در این نوشته سعی داریم شما را با نحوه ی ساخت گالری تصاویر با استفاده از css آشنا کنیم. Css زبان مکمل html  است و زبانی است که در کنار html قرار می گیرد و شما با استفاده از آن می توانید به عناصر خود رنگ, پس زمینه, فونت, سایز و.. بدهید کاری که با […]

آموزش جی کوئری

آموزش جی کوئری – جی کوئری چیست؟

آموزش جی کوئری JQuery درس اول : جی کوئری چیست؟  قبل از اینکه آموزش جی کوئری JQuery را شروع کنیم  بهتر است بدانید برای تفهیم بیشتر مطلب ، باید یک سری اطلاعات پایه ای راجع به موارد زیر داشته باشید : HTML Css Javascript ما فرض را بر این میگذاریم که شما با موارد ذکر شده […]

آموزش کدهای وردپرس در طراحی سایت

آموزش کدهای وردپرس در طراحی سایت تیم طراحی سایت ارزان وب یار کد های وردپرس آموزش کد های وردپرس در طراحی سایت با نوشته هاشروع میشه ، آخهاین بخش خیلی مهمه و خیلی ساده ار امکانات طراحی سایت با فریم وورک های تخصصی و غولی مثل وردپرس داشتن حالات مختلف است مثل : post_type: در […]

کلاس طراحی سایت php jquery css3 html اصفهان

سلام به همه علاقه مندان به طراحی سایت و سئو سایت و کسب درآمد از این صنعت شما هم مثل من عاشق اینترنت و فناوری ، کسب درآمد از وب  هستی ؟؟؟ یا مثل من اگر یک روز نری تو اینترنت و درآمد ازش فکر نکنی روزت روز نمیشه؟ یا فقط باهاش حساباتون ، فیس […]

ارسال دیدگاه

  1. […] شفاف کردن تصاویر در css اولین بار در طراحی سایت اصفهان | سئو سایت اصفهان |طراحی […]

*    

*    

ارتباط با تیم پشتیبانی وب یار

تمام پشتیبان ها در حال پاسخ به مشتریان هستند. لطفا درخواست خود را ارسال نمایید تا در کوتاه ترین زمان ممکن با شما تماس بگیریم.

چه کمکی از تیم وب یار بر می آید ، با ما در میان بگذارید

برای گفتگو کلید ENTER را بفشارید