گروه مقاله : CSS
تاريخ انتشار : 1394/02/05 - 10:55
كد :248
با استفاده از CSS شما می توانید تصویر با وضوح کم یا transparent ایجاد نمایید. این کار توسط خاصیت opacity انجام میشود و در واقع جزء امکانات CSS3 محسوب می شود.
با استفاده از CSS شما می توانید تصویر با وضوح کم یا transparent ایجاد نمایید. این کار توسط خاصیت opacity انجام میشود و در واقع جزء امکانات CSS3 محسوب می شود.
به مثال زیر توجه نمایید.
<!DOCTYPE html>
<html>
<head>
<style>
img-opacity {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
</style>
</head>
<body>
<img src="klematis.jpg" width="150" height="113" />
<img src="klematis.jpg" width="150" height="113" class="img-opacity" />
</body>
</html>
Ie9, chrome, firefox, opera, safari همگی از این خاصیت حمایت می کنند. مقادیر این خاصیت می تواند اعدادی در بازه 0.0 تا 1.0 باشند. اگر مقدار خاصیت opacity به 1 باشد، شی مورد نظر با وضوح کامل نمایش داده می شود و هر چقدر که از 1 کمتر و به صفر نزدیکتر باشد از میزان وضوح تصویر کاسته می شود، چنانچه برابر با صفر قرار داده شود تصویر نامرئی خواهد بود.
در Ie8 و ماقبل این خاصیت باید به صورت زیر تعریف شود که X عددی بین 0 تا 100 می باشد که هر چه به عدد 100 نزدیکتر باشد وضوح بیشتر و هر چه به 0 نزدیکتر باشد وضوح کمتر می شود. (100 وضوح کامل و 0 نامرئی در نظر گرفته می شود.)
از خاصیت opacity برای hover دادن نیز استفاده می شود. به مثال زیر توجه نمایید.
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<img src="klematis.jpg" width="150" height="113" alt="klematis">
<img src="klematis2.jpg" width="150" height="113" alt="klematis">
<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>
در مثال بالا، در حالت عادی میزان وضوح تصویر 1 (در مورد ie8 و ماقبل 100) و در حالت hover میزان وضوح 0.6 (در مورد ie8 و ما قبل 60) خواهد شد.
متن در داخل یک transparent box :
شما همچنین می توانید داخل یک فضای transparent متن نیز قرار دهید. برای این منظور به مثال زیر توجه نمایید.
<!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 ایجاد کردیم که فضای داخلی آن را با عکس پوشاندیم و یک کادر نیز دور آن قرار دادیم. سپس div دوم را با کلاس transbox داخل دیو قبلی قرار دادیم که فضای داخلی آن را با رنگ پر کرده و دور آن کادر قرار دادیم و میزان وضوح آن را برابر 0.6 در نظر گرفتیم و در داخل آن نیز متن مورد نظر را با استفاده از تگ p نوشتیم.