شفاف کردن تصاویر در CSS
شفاف کردن تصاویر
ایجاد تصاویر شفاف در CSS بسیار ساده است.
توجه: خصوصیت opacity بخشی از CSS3 می باشد.
مثال - خودتان امتحان کنید
ایجاد یک تصویر شفاف با افکت Hover
قرار دادن یک متن دلخواه داخل یک جعبه شفاف شده
مثال 1 - شفاف کردن تصاویر
در CSS3 برای شفاف کردن تصاویر از خصوصیت opacity استفاده می شود.
ابتدا ما نشان می دهیم که چگونه یک تصویر را شفاف کنیم.
عکس باقاعده:
همان عکس با شفاف سازی:
به کد CSS زیر توجه کنید:
{
opacity:0.4;
filter:alpha(opacity=40); /* و نسخه های پایین تر IE8 برای*/
}
برای شفاف کردن تصاویر در IE9, Firefox, Chrome, Opera و Safari از خصوصیت opacity استفاده می شود. این خصوصیت مقداری بین 1.0 و 0.0 می گیرد، هر چه این مقدار کوچکتر باشد شفافیت عکس بیشتر خواهد بود.
در IE8 و نسخه های پایین تر از از کد زیر استفاده کنید. مقدار x می تواند عددی بین 0 تا 100 باشد که هرچه این عدد کوچکتر باشد شفایت عکس بیشتر خواهد بود:
filter:alpha(opacity=x)
مثال 2 - شفاب کردن تصاویر - افکت Hover
موس را روی عکس های زیر قرار دهید:
به کد CSS زیر توجه کنید:
{
opacity:0.4;
filter:alpha(opacity=40); /* و نسخه های پایین تر IE8 برای*/
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* و نسخه های پایین تر IE8 برای*/
}
بلاک اول کد بالا همانند مثال 1 است. در بلاک دوم اگر اشاره گر موس روی عکس قرار بگیرد، با تنظیم مقادیر 1.0 و 100 شفافیت نخواهیم داشت و عکس به صورت معمول نمایش داده می شود.
زمانی که اشاره گر موس از روی فضای عکس بیرون برود، شفافیت عکس را دوباره خواهیم داشت.
مثال 3 - قرار دادن متن، در یک جعبه شفاف شده
این یک متن دلخواه است که داخل یک جعبه شفاف شده قرار داده شده است. این یک متن دلخواه است که داخل یک جعبه شفاف شده قرار داده شده است. این یک متن دلخواه است که داخل یک جعبه شفاف شده قرار داده شده است. این یک متن دلخواه است که داخل یک جعبه شفاف شده قرار داده شده است.
به کد CSS زیر توجه کنید:
<head>
<style type="text/css">
div.background
{
width:500px;
height:250px;
background:url(klematis.jpg) repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>
</body>
</html>
ابتدا یک عنصر div با عرض و ارتفاع ثابت و یک پس زمینه و لبه های مشخص، ایجاد کردیم. سپس یک div کوچکتر داخل div اول قرار دادیم وعرض آنرا ثابت و رنگ پس زمینه و لبه های آن را مانند قبل مشخص کردیم و در ادامه خصوصیت opacity آنرا با مقدار 0.6 تنظیم کردیم.
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 28963
دیدگاه‌ها
با سلام و تشکر از سایت خوبتون که عالیه
میخواستم بدانم مقدار solid دقیقا چه کاربردی داره؟ ممنون میشم بگید
border:2px solid black;
سلام
همانطور که می دانید با استفاده از خصوصیت border می توانیم، یک کادر با ضخامت، استایل و رنگ دلخواه در اطراف عناصر صفحه ایجاد نماییم.
اما هنگام مقدار دهی خصوصیت مذکور باید دقت کنید که ابتدا باید: صخامت(2px) و سپس استایل(solid) و سپس رنگ(black) را به ترتیب تنظیم نمایید.
حالا حتما متوجه شدید که مقدار دوم یعنی solid بمعنی یکپارچه، استایل کادر مورد نظرمان را تعیین می کند. و زمانی که با solid مقداردهی شود، یک خط صاف ایجاد می کند. (بعنوان مثال dotted باعث ایجاد یک کادر با استایل نقطه چین می شود)
سلام خسته نباشید خواهش می کنم هر چی زودتر به این سوال پاسخ بدین همین امشب لازمش دارم
من به یه عنصری opacity میدم با مقدار 0.50 و میخام تو همون عنصر یه متنی بنویسم اما متن کمرنگ میشه
یعنی اون opacity روی اینم تاثیر می زاره هر کاری کردم جلوشو بگیرم نشد میشه کمکم کنید؟
با سلام و تشکر.
منظور شما دقیقا مشخص نیست. ولی می‌تونید برای رنگ پس زمینه و عکس پس زمینه از opacity نیم استفاده کنید. ولی متن‌ها رو داخل یه تگ span بذارید و به اون تگ span مقدار opacity یک بدید. با این کار فقط متن داخل اون span به طور کامل شفاف میشه.