تاری و شفافیت در CSS

صفت opacity تاری یا شفافیت عناصر را تعیین می کند.

 

تصاویر پشت نما ( transparent)

صفت opacity را می توان بر روی مقدار 0.0 تا 1.0 تعریف کرد. کمترین مقدار ، نتیجه پشت نمای بیشتری ایجاد می کند.

**** تصاویر



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

مثال :

<!DOCTYPE html>
<html>
<head>
<style>
img {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}
</style>
</head>
<body>

<h1>Image Transparency</h1>
<p>The opacity property specifies the transparency of an element. The lower the value, the more transparent:</p>

<p>Image with 50% opacity:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">

</body>
</html>


 

جلوه پشت نما با اشاره ماوس

صفت opacity معمولا به همراه سلکتور hover: استفاده می شود تا به هنگام اشاره ماوس بر روی عنصر ، آن را پشت نما نمایش دهد :

**** تصاویر نمونه

مثال :

<!DOCTYPE html>
<html>
<head>
<style>
img {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
</style>
</head>
<body>

<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_fjords.jpg" alt="Fjords" width="170" height="100">

<p><b>Note:</b> In IE, a !DOCTYPE must be added for the :hover selector to work on other elements than the a element.</p>

</body>
</html>


تشریح مثال بالا :
بلوک اول CSS شبیه به کدهای مثال اول است. به علاوه ، تعیین کرده ایم که اگر کاربر ماوس را بر روی یکی از تصاویر قرار دهد چه اتفاقی بیافتد. در این نمونه تنظیم کرده ایم که با اشاره ماوس ، تصویر شفاف نمایش داده شود و پشت نما نشان داده نشود. CSS مورد استفاده در این مثال opacity:1; است.

زمانی که ماوس را از روی تصویر کنار می کشیم ، تصویر دوباره پشت نما می شود.

مثالی از جلوه اشاره ماوس معکوس :

**** تصاویر

مثال :

<!DOCTYPE html>
<html>
<head>
<style>
img:hover {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}
</style>
</head>
<body>

<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_fjords.jpg" alt="Fjords" width="170" height="100">

<p><b>Note:</b> In IE, a !DOCTYPE must be added for the :hover selector to work on other elements than the a element.</p>

</body>
</html>

 

باکس های پشت نما

زمانی که از صفت opacity برای پشت نما کردن زمینه یک عنصر استفاده می کنیم ، تمام عناصر نسل بعد  آن عنصر نیز به همان اندازه پشت نما می شود. در این حالت ممکن است متن داخل یک عنصر کاملا پشت نما شده ، به سختی خوانده شود.

**** باکس ها

مثال :

<!DOCTYPE html>
<html>
<head>
<style>
div {
    background-color: #4CAF50;
    padding: 10px;
}

div.first {
    opacity: 0.1;
    filter: alpha(opacity=10); /* For IE8 and earlier */
}

div.second {
    opacity: 0.3;
    filter: alpha(opacity=30); /* For IE8 and earlier */
}

div.third {
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
}
</style>
</head>
<body>

<h1>Transparent Box</h1>
<p>When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read:</p>

<div class="first"><p>opacity 0.1</p></div>
<div class="second"><p>opacity 0.3</p></div>
<div class="third"><p>opacity 0.6</p></div>
<div><p>opacity 1 (default)</p></div>

</body>
</html>

 

پشت نما با استفاده از RGBA

اگر نخواهیم مانند مثال قبل ، به عناصر نسل بعد یک عنصر ، جلوه پشت نما اضافه شود ، باید از مقدار رنگ RGBA استفاده کنیم. مثال زیر میزان شفافیت رنگ پس زمینه عنصر را تعیین می کند و تاثیری روی متن نخواهد داشت.

**** باکس ها

در درس رنگ های CSS یاد گرفته اید که از RGB به عنوان مقدار رنگ استفاده کنید. در این مورد ، CSS3 ، مقدار RGB رنگ را به همراه یک کانال آلفا معرفی کرده است که مقدار شفافیت یک رنگ را مشخص می کند.
در RGBA ، مقدار A یا همان آلفا از 0.0 تا 1.0 می باشد. 0.0 کاملا پشت نما و 1.0 کاملا شفاف خواهد بود.

نکته : در مورد RGBA در درس مربوط به آن در آموزش CSS3 ، بیشتر یاد خواهید گرفت.

مثال :
<!DOCTYPE html>
<html>
<head>
<style>
div {
    background: rgb(76, 175, 80);
    padding: 10px;
}

div.first {
    background: rgba(76, 175, 80, 0.1);
}

div.second {
    background: rgba(76, 175, 80, 0.3);
}

div.third {
    background: rgba(76, 175, 80, 0.6);
}
</style>
</head>
<body>

<h1>Transparent Box</h1>
<p>With opacity:</p>
<div style="opacity:0.1;"><p>10% opacity</p></div>
<div style="opacity:0.3;"><p>30% opacity</p></div>
<div style="opacity:0.6;"><p>60% opacity</p></div>
<div><p>opacity 1</p></div>

<p>With RGBA color values:</p>
<div class="first"><p>10% opacity</p></div>
<div class="second"><p>30% opacity</p></div>
<div class="third"><p>60% opacity</p></div>
<div><p>default</p></div>

<p>Notice how the text gets transparent as well as the background color when using the opacity property.</p>

</body>
</html>


متن در باکس پشت نما

**** باکس پشت نما و متن

مثال :

<!DOCTYPE html>
<html>
<head>
<style>
div.background {
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
}

div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
  filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox p {
  margin: 5%;
  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.</p>
  </div>
</div>

</body>
</html>


تشریح مثال بالا :
ابتدا یک div با "class="background و با یک تصویر پس زمینه و یک خط حاشیه ، ایجاد کرده ایم. سپس یک div دیگر با "class="transbox داخل div اول ایجاد کرده ایم. div دارای کلاس transbox رنگ پس زمینه و خط حاشیه دارد و پشت نما می باشد. داخل div پشت نما با استفاده از عنصر <p> متن را اضافه کرده ایم.
 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط