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

شفاف سازی اشیا در CSS
سلام. همونطور که قول داده بودم اومدم تا با هم شفاف کردن اشیا و تصاویر رو در CSS یاد بگیریم. شفاف کردن به دو صورت انجام میشه که فرق هایی یه سری تفاوت با هم دارن. بیاید شروع کنیم.
برای شروع بهتره ابتدا یک شئ ایجاد کنیم، مثلا یک باکس مشکی رنگ:

<div  class=”bos”>TAKIDE</div>

اگر میخواید تفاوت رو احساس کنید و شفاف سازی رو درک کنید بهتره برای فایل HTML تون یه بک گراند تعیین کنید. حالا سراغ استایل نویسی میریم. اول بکگراند انتخاب میکنیم و بعد سراغ استایل نویسی باکسمون میریم:
روش اول – استفاده از opacity :

Body {
	background-image:url(‘bg.jpg’);
}
.box {
	background-color:#000;
	width:400px;
	height:200px;
	margin:50 auto;
}

خوب ما در اینجا یک باکس به رنگ مشکی در ابعاد ۴۰۰*۲۰۰ داریم که در وسط صفحه و به فاصله ۵۰px از بالای صفحه است. برای شفاف کردن به روش opacity میبایست کد زیر رو به استایل باکسمون اضافه کنیم:

	Opacity:0.5;

مقدار اون هم از صفر تا یک میتونه باشه. به همین سادگی! در انتها کد استایل شما بدین صورت میشه:

Body {
	background-image:url(‘bg.jpg’);
}
.box {
	background-color:#000;
	width:400px;
	height:200px;
	margin:50 auto;
	Opacity:0.5;
}

روش دوم – استفاده از رنگ دهی RGBA :
جلسه قبل انواع رنگ دهی و رنگ دهی RGBA رو براتون توضیح دادم و همون طور که گفتم مقدار Alpha شفافیت رنگ رو به ما میده. کار با این روش هم ساده هستش. کد زیر رو جایگزین استایل باکس میکنیم:

.box {
	background-color:rgba(255,255,255,1);
	width:400px;
	height:200px;
	margin:50 auto;
}

برای شفاف سازی با این روش شما باید عدد آخر (Alpha) رو که الان مقدار اون یک هست رو تغییر بدید. مثلا ۰٫۱ خورجی خوبی بهتون میده.
تفاوت این دو روش رو متوجه شدید؟ اگه نشدین دو تا فایل باکس درست کنید و هر کدوم رو با یک روش بنویسید و ببینید فرق شون چیه.
با روش اول شما برای کل کلاس باکس شفافیتی رو کذاشتین و هرچی توی باکس باشه هم شفاف میشه ولی توی روش دوم فقط بکگراند باکسمون شفاف میشه. برای همون عبارت تک ایده رو توی باکسمون نوشتم.
منتظر سوالاتون هستم.

25 پاسخ به “شفاف سازی اشیا در CSS”

  1. حمید می‌گه:

    سلام, مرسی از زحماتتون , اگر میشه پیش نمایشی هم بزارید تا ببینیم خیلی عالی میشه !

    تشکر

  2. mahdi می‌گه:

    salam
    man ye moshkeli dashtam :
    maghti alpha ro mizanam 0/9 ba 0/1 farghi nadare !!!
    man mikham taghriban nesfe bg un div am peyda bashe , bayad chikar konam ?
    ba tashakor

  3. فرهاد می‌گه:

    سلام
    بسار عالی خیلی ممنون
    موفق باشید

  4. الهام می‌گه:

    خیلی ممنون عالی بود

  5. فرید می‌گه:

    دمت گرم ،مشکلمو حل کرد

  6. پوریا سبحانلو می‌گه:

    سلام علی جان.
    از مطالب سایتت استفاده میکنم میخونم عالیه.
    یه سوال دارم
    یه منو رو شفاف کردم میخوام اسلایدو زیرش بندازم.
    مشکل اینه منو شفاف شده. رنگگ فونتشم شفاف شده.
    میشه راهنماییم کنی؟
    میخوام منو شفاف بشه ازیر اسلاید باشه.
    مثل این سایت

  7. پوریا سبحانلو می‌گه:

    یه مشکل خوردم میشه راهنماییم کنی؟
    یه راه ارتباطی؟

  8. مهرداد می‌گه:

    با عرض سلام
    ممنون از سایت خوبتون
    یک سوال داشتم
    اگه من بخوام یک div را شفاف کنم ولی نوشته های درون div شفاف نباشند باید چکار کنم؟؟؟؟
    ممنون میشم جواب بدین

  9. arman rouhani می‌گه:

    مرسی.کمکم کرد

  10. arman rouhani می‌گه:

    مهرداد به دایوت opacity نده.فقط background دایوتو با rgbaبده که آخرین مولفش همون opacityمیباشد

  11. سید خسام الدین سلیمانی می‌گه:

    سلام دوست عزیز . ممنون از زحماتی که می کشی . می شه لطفا مطلبی با موضوع قرار دادن عکس ها روی هم درcss در سایتت بزاری ؟ یا اگه گزاشتی لینکش رو به ایمیلم بفرستی ؟
    خیلی خیلی ممنون می شم ازت . یا علی.

  12. سید خسام الدین سلیمانی می‌گه:

    فکر کنم منظورم رو واضح گفته باشم .آموزش این که مثلا یک عنصر در زیر قرار گرفته باشه و یک عنصر در رو . ممنون می شم راهنمایی کنید .
    راستی یک سوال دیگه . شما در سایتتان از چه فونتی استفاده می کنید ؟

  13. اهواز سایت می‌گه:

    من هنوز نفهمیدم چرا هم rgba هست هم رنگ دهی با کد ۶ رقمی چه فرقی با هم دارن

    • علی همایونی می‌گه:

      دوست عزیز rgba یک فیلد alpha بیشتر داره که با اون میشه مقدار یا همون حجم رنگ رو تغییر داد که این خاصیت رو رنگ دهی هگز نداره!

  14. علیرضا می‌گه:

    مرسی .. روش دوم خیلی بهتره .. چون اجزای داخل باکس ، شفاف نمیشه .. اما توی روش اول هم باکس و هم اجزای داخلش شفاف میشن …

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

آخرین محصولات فروشگاه
برخی مطالب تصادفی مای دیزاین
ایجاد سایه درونی با استفاده از CSS
مای دیزاین شروع به کار کرد
عدم نمایش مطالب دسته ای خاص در صفحه اصلی وردپرس
خرید قالب وردپرس مای دیزاین (نسخه ۴٫۵)
حذف رونوشت های پست ها از وردپرس
تصحیح خودکار رنگ و کنتراست تصویر در فتوشاپ