ورود به کارتابل مشتریان وب مهراز
تاری و شفافیت در CSS
یادگیری 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> متن را اضافه کرده ایم.
نظر شما
>