در این آموزش با نحوه ایجاد تصاویر شفاف و همچنین کاهش شفافیت background آشنا می شویم .

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

ایجاد تصاویر شفاف:
<html>
<head>
<style type="text/css">
img
{
opacity:0.4;

filter:alpha(opacity=40);

}</style>
</head>
<body>
<h1>Image Transparency</h1>
<img src="klematis.jpg" width="150" height="113" alt="klematis"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
<img src="klematis2.jpg" width="150" height="113" alt="klematis"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
</body>
</html>

 ایجاد یک box شفاف با متنی روی تصویر پیش زمینه

<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;
  filter:alpha(opacity=60);
  opacity:0.6;
}

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>

 نکته: مثال های بالا هنوز استاندارد نیستند. اما در همه مرورگرهای جدید کار می کند.

به سورس کد زیر نگاه کنید:

<img src="klematis.jpg" width="150" height="113" alt="klematis"

style="opacity:0.4;filter:alpha(opacity=40)" />

  Firefox از پراپرتی opacity:x برای شفافیت استفاده می کند، در حالیکه IE از filter:alpha(opacity=x) استفاده می کند.

نکته: سینتکس شفافیت، opacity:x است.

در فایرفاکس، (opacity:x) می تواند مقداری بین 0.0 تا 1.0 باشد. مقدار کمتر، آن عنصر را شفافتر می کند.

در اینترنت اکسپلورر، (filter:alpha(opacity=x)) می تواند مقداری بین 0 تا 100 باشد. مقداری کمتر، آن عنصر را شفاف تر می کند.

مثال دوم – متن در box شفاف

سورس کد این تصویر به شرح زیر است:

<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;
  /* for IE */
  filter:alpha(opacity=60);
  /* CSS3 standard */
  opacity:0.6;
  }

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 class="background")) با پهنا و ارتفاع ثابت، یک تصویر پیش زمینه، و یک border ایجاد کردیم. سپس یک div کوچکتر (class="transbox") درون عنصر div اول ایجاد کردیم. این div نیز دارای پهنای ثابت، تصویر پیش زمینه، و یک border است. به علاوه، این div را شفاف کردیم.

درون div شفاف، مقداری متن درون عنصر p وارد کردیم.