سبد خرید (0)

تبلیغات

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

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

Wiki

ایجاد تصاویر شفاف در CSS بسیار ساده است.

توجه: خصوصیت opacity بخشی از CSS3 می باشد.


مثال

مثال - خودتان امتحان کنید

ایجاد یک تصویر شفاف با افکت Hover

قرار دادن یک متن دلخواه داخل یک جعبه شفاف شده


مثال 1 - شفاف کردن تصاویر

Wiki

در CSS3 برای شفاف کردن تصاویر از خصوصیت opacity استفاده می شود.

ابتدا ما نشان می دهیم که چگونه یک تصویر را شفاف کنیم.

عکس باقاعده:

klematis

همان عکس با شفاف سازی:

klematis

به کد CSS زیر توجه کنید:

img
{
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

Wiki

موس را روی عکس های زیر قرار دهید:

klematis klematis

به کد CSS زیر توجه کنید:

img
{
opacity:0.4;
filter:alpha(opacity=40); /* و نسخه های پایین تر IE8 برای*/
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* و نسخه های پایین تر IE8 برای*/
}

بلاک اول کد بالا همانند مثال 1 است. در بلاک دوم اگر اشاره گر موس روی عکس قرار بگیرد، با تنظیم مقادیر 1.0 و 100 شفافیت نخواهیم داشت و عکس به صورت معمول نمایش داده می شود.

زمانی که اشاره گر موس از روی فضای عکس بیرون برود، شفافیت عکس را دوباره خواهیم داشت.


مثال 3 - قرار دادن متن، در یک جعبه شفاف شده

Wiki

این یک متن دلخواه است که داخل یک جعبه شفاف شده قرار داده شده است. این یک متن دلخواه است که داخل یک جعبه شفاف شده قرار داده شده است. این یک متن دلخواه است که داخل یک جعبه شفاف شده قرار داده شده است. این یک متن دلخواه است که داخل یک جعبه شفاف شده قرار داده شده است.

به کد CSS زیر توجه کنید:

<html>
<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 تنظیم کردیم.

دیدگاه‌ها  

+1 # علی تامی حصاری 1396-06-03 19:45
با سلام و تشکر از سایت خوبتون که عالیه
میخواستم بدانم مقدار solid دقیقا چه کاربردی داره؟ ممنون میشم بگید
border:2px solid black;
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1396-06-06 12:00
سلام
همانطور که می دانید با استفاده از خصوصیت border می توانیم، یک کادر با ضخامت، استایل و رنگ دلخواه در اطراف عناصر صفحه ایجاد نماییم.
اما هنگام مقدار دهی خصوصیت مذکور باید دقت کنید که ابتدا باید: صخامت(2px) و سپس استایل(solid) و سپس رنگ(black) را به ترتیب تنظیم نمایید.
حالا حتما متوجه شدید که مقدار دوم یعنی solid بمعنی یکپارچه، استایل کادر مورد نظرمان را تعیین می کند. و زمانی که با solid مقداردهی شود، یک خط صاف ایجاد می کند. (بعنوان مثال dotted باعث ایجاد یک کادر با استایل نقطه چین می شود)
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # یاشار 1394-09-24 22:05
سلام خسته نباشید خواهش می کنم هر چی زودتر به این سوال پاسخ بدین همین امشب لازمش دارم
من به یه عنصری opacity میدم با مقدار 0.50 و میخام تو همون عنصر یه متنی بنویسم اما متن کمرنگ میشه
یعنی اون opacity روی اینم تاثیر می زاره هر کاری کردم جلوشو بگیرم نشد میشه کمکم کنید؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مهرداد صلاحی 1394-09-24 22:50
با سلام و تشکر.
منظور شما دقیقا مشخص نیست. ولی می‌تونید برای رنگ پس زمینه و عکس پس زمینه از opacity نیم استفاده کنید. ولی متن‌ها رو داخل یه تگ span بذارید و به اون تگ span‌ مقدار opacity یک بدید. با این کار فقط متن داخل اون span به طور کامل شفاف میشه.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی CSS

بستن
مدرس:
سوال و جواب:

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

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!