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

آموزش صوتی CSS

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

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

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