تاری و شفافیت در 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 یادگیری CSS

مقدمه ای بر CSS ترکیب کدهای CSS CSS چگونه کار میکند؟ رنگ ها در CSS پس زمينه در CSS خط حاشيه ( border ) در CSS margin (حاشیه) در CSS صفت padding در CSS عرض و ارتفاع در CSS مدل جعبه ای CSS outline در CSS متن در CSS فونت ها در CSS آیکون ها در CSS لینک ها در CSS لیست ها در CSS جدول در CSS نمايش در قالب بندی CSS حداكثر عرض در CSS صفت position در CSS صفت overflow در CSS صفت float در CSS بلوک اینلاین در CSS تراز بندی در CSS combinator در CSS Pseudo-classes در CSS Pseudo-Elements در CSS تاری و شفافیت در CSS منو ناوبری در CSS کرکره ها در CSS ابزار راهنما (tooltip) در CSS گالری تصاویر در CSS اسپرایت تصویر در CSS سلکتور های صفات در CSS فرم ها در CSS شمارشگر ها در CSS معرفی CSS3 گوشه های گرد در CSS3 حاشیه های تصویری در CSS3 پس زمینه در CSS3 رنگ ها در CSS3 گرادیانت در CSS3 سایه در CSS3 متن در CSS3 فونت ها در CSS3 ترنسفرم های دوبعدی در CSS3 ترنسفرم های سه بعدی CSS3 انتقال در CSS انیمیشن در CSS Tooltip در CSS استایل تصویر در CSS ویژگی object-fit در CSS دکمه ها در CSS صفحه بندی در CSS چندستونی در CSS رابط کاربری CSS متغیرهای CSS اندازه جعبه (Box) در CSS Flexbox در CSS کوئری Media در CSS مثال کوئری Media در CSS طراحی ریسپانسیو وب – مقدمه طراحی ریسپانسیو وب – viewport طراحی ریسپانسیو وب – Grid-View طراحی ریسپانسیو وب – کوئری Media طراحی ریسپانسیو وب – تصاویر طراحی ریسپانسیو وب – ویدیو طراحی ریسپانسیو وب – چارچوب (Frameworks) چیدمان شبکه ای در CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران بپیوندید

   
   
عضویت
پیام تستی برای گروه نرم افزاری وب مهراز