خاصیت Opacity در CSS؛ یکی از مفاهیم اساسی در css! این خاصیت یکی از ویژگی هایی است که به کمک آن می توانیم شفافیت عناصر را در CSS تعیین کنیم. امروزه توسعه دهندگان زیادی از ویژگی Opacity در CSS استفاده می کنند.
زبان برنامه نویسی CSS شامل تنظیمات پیشرفته در ایجاد افکت و ویرایش تصاویر است. در CSS می توان مانند محیط فتوشاپ، جلوه و افکت خاصی روی یک عکس اعمال کرد. اگر قصد طراحی سایت در ارومیه را دارید، توصیه می کنیم تا با ویژگی های زبان CSS آشنا شوید. به همین دلیل ما می خواهیم در این مطلب، توضیحاتی در مورد ویژگی Opacity در CSS برای شما ارائه کنیم و با ذکر مثالی، نحوه کار با این خاصیت را به شما یاد دهیم.
ویژگی Opacity در CSS چیست؟
شاید این سوال برای شما نیز پیش آمده باشد که ویژگی Opacity چیست؟ ما می توانیم در پاسخ به این سوال بگوییم که ویژگی Opacity یکی از خاصیت های کاربردی در زبان برنامه نویسی CSS است که شما می توانید با استفاده از این ویژگی شفافیت عکس های خودتان را مشخص کنید. به طور کلی، می توان با استفاده از ویژگی Opacity در CSS میزان شفافیت و تاری یک تگ را مشخص یا تعریف کرد. اگر می خواهید نحوه کار با این ویژگی را یاد بگیرید، پیشنهاد می کنیم تا در دوره آموزش CSS شرکت کنید.
جالب است بدانید، توسعه دهندگان می توانند با استفاده از خاصیت Opacity میزان شفافیت یک عنصر را کنترل کنند و حتی این شفافیت را تا جایی ادامه دهند که عنصر ناپدید شود. توجه داشته باشید که این ویژگی یک مقدار بین 0 تا 1 می پذیرد که مقدار 1 مقدار اولیه است و باعث می شود تا عنصر در حالت عادی خود باشد و مقدار 0 باعث می شود تا عنصر ناپدید شود. مقادیر بین این دو عدد عنصر را نیمه شفاف می کنند.
چگونه از ویژگی Opacity استفاده کنیم؟
توجه داشته باشید که از خاصیت Opacity در CSS برای مشخص کردن میزان تیرگی و یا شفافیت عناصر و عکس ها استفاده می کنیم و یکی از مهمترین بخش ها پس از آموزش کار با ویژگی padding میباشد. این ویژگی می تواند دارای مقداری بین 0.0 تا 1.0 باشد. هرچقدر این مقدار به 0 نزدیک تر باشد، عنصر شفاف تر می شود. مثال:
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
کاربردهای بیشتر Opacity در CSS
یکی از کاربردهای خاصیت Opacity در زبان برنامه نویسی CSS برای مواقعی است که به وجود یک عنصر یا تصویر نیاز داریم، ولی آن عنصر نباید دیده شود. دو دستور برای کدر کردن عناصر با این ویژگی وجود دارد که می توانیم از این دستورها استفاده کنیم:
/* Using opacity to hide our element */
div{
opacity:0;
}
/* Using visibility to hide our element */
div{
visibility: hidden; }
نکته قابل توجه: خاصیت visibility در اینجا به کمک مقدار hidden کاملا شبیه دستور opacity:0 عمل می کند. شما می توانید با قرار دادن مقدار opacity در نزدیکی عدد 1 عکس یا عنصر خودتان را در صصفحه سایت کدر کرده و آن را ناپدید کنید.
جمع بندی و نتیجه:
ما خواستیم در این مطلب، توضیحاتی در مورد ویژگی Opacity در CSS برای شما ارائه کنیم و با ذکر مثالی، نحوه کار با این خاصیت را به شما یاد دهیم. همانطور که گفته شد، ویژگی Opacity یکی از خاصیت های مهم و کاربردی در زبان برنامه نویسی CSS است که شما می توانید از این خاصیت استفاده کنید. شما می توانید با استفاده از این خاصیت میزان شفافیت عناصر خودتان را تعیین کنید.
نظرات: