شفافیت Opacity در CSS
خوش اومدین به پانزدهمین جلسه از دوره آموزش رایگان CSS. توی این جلسه قرار هست در مورد یکی از امکانات زیبای css با همدیگه صحبت کنیم. ما با استفاده از ویژگی opacity این امکان رو داریم که شفافیت عناصر خودمون رو تغییر بدیم. با این کار جذابیت بصری بیشتری رو به صفحه وب خودمون میدیم.
ویژگی opacity
ویژگی opacity یه ویژگی عمومی هست. به این معنی که ما میتونیم ازش برای همه تگ ها استفاده کنیم. مقداردهی این ویژگی به دو صورت انجام میشه:
روش اول: عددی بین 0.0 تا 1.0 رو وارد میکنیم. مثلا با وارد کردن عدد 0.5 نیمی از شفافیت اون عنصر رو نمایش میدیم.
روش دوم: وارد کردن عددی بین ٪0 تا ٪100. مثلا با وارد کردن مقدار ٪50 نیمی از شفافیت اون عنصر رو نمایش میدیم.
شفافیت تصویر در css
همونطور که در بالا گفتم ما میتونیم با استفاده از ویژگی opacity رو مقداردهی کنیم. در اینجا من این کار رو برای تگ تصویر انجام میدم:
img {
opacity: 0.5;
}
ما میتونیم با استفاده از سودو hover این امکان رو بوجود بیاریم که شفافیت تصویر در حالت معمولی و hover متفاوت باشه. به این ترتیب، ترکیب قشنگی بوجود میاد که زمانی که کاربر موس رو روی تصویر میبره شفافیت تصویر بیشتر میشه.
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
در قطعه کد بالا تصویر من در حالت معمولی شفافیت 0.5 رو داره یعنی شفافیتش نصف هست و زمانی که کاربر موس رو روی تصویر میبره مقدار شفافیت با عدد 1.0 تنظیم میشه و این به معنی داشتن شفافیت کامل برای تصویر است.
جعبه شفاف در CSS
ما با استفاده از ویژگی opacity میتونیم شفافیت هر باکس و جعبه ای رو توی css مدیریت کنیم. فرض کنیم یه div داریم و براش رنگی رو به عنوان بک گراند قرار دادیم. حالا میتونیم با مقداردهی ویژگی opacity ، شفافیت باکس خودمون رو کنترل کنیم.
div {
background-color:red;
opacity: 0.3;
}
ما میتونیم همین کار رو با استفاده از یک روش دیگه انجام بدیم. اگر ما در زمان مقداردهی رنگ از روش rgba استفاده کنیم، میتونیم علاوه بر تعیین مقدار رنگ های rgv (red, green, blue) مقدار شفافیت رو هم در بخش آخر تنظیم کنیم:
div {
background: rgba(255, 0, 0, 0.3) /* Red background with 30% opacity */
}
در کد بالا من مقدار رنگ div رو با استفاده از روش rgba مقداردهی کردم. علاوه بر ۳ مقدار قرمز و سبز و آبی، یک مقدار برای شفافیت رنگ هم قرار دادم.
نوشتن متن داخل جعبه شفاف
ما میتونیم با استفاده از مواردی که تا اینجا یاد گرفتیم یه جعبه شفاف ایجاد کنیم که داخل اون متنی نوشته شده باشه. تصویر زیر رو ببینید:
همونطور که در تصویر بالا میبینید من با استفاده از یک div که مقدار رنگ اون رو با استفاده از روش rgba مقداردهی کردم و شفافیت 60٪ رو براش تعیین کردم، تونستم یه جعبه شفاف ایجاد کنم و در داخل اون هم متنی رو نوشتم. کد html و css این جعبه شفاف رو در زیر ببینید:
<style>
div.background {
background: url(picture.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color:rgba(255, 255, 255, 0.6);
border: 1px solid black;
border-radius:15px;
}
div.transbox h1 {
margin: 5%;
font-weight: bold;
color: #000000;
text-align: center;
}
</style>
<body>
<div class="background">
<div class="transbox">
<h1>Mr.Ebi</h1>
</div>
</div>
</body>
نکته مهم: برای تعیین شفافیت رنگ بک گراند، سعی کنید همیشه از مقداردهی رنگ rgba استفاده کنید. هرچند ما میتونیم از opacity هم استفاده کنیم. ولی opacity خاصیت ارث بری داره (این موضوع رو در جلسه جداگانه بررسی میکنیم) و همین باعث میشه که محتوای داخل اون هم از همین میزان شفافیت استفاده کنه. در صورتی که background-color همچین خصوصیتی نداره. اگر من در مثال بالا برای div.transbox از opacity استفاده میکردم، تگ h1 داخل اون هم بصورت پیشفرض مقدار opacity تگ div قبلی خودش رو میگرفت. بحث وراثت رو در یک جلسه جداگانه بصورت مفصل توضیح خواهم داد.
