opacity در لغت به معنی «شفافیت» است و در عمل میزان دید ما نسبت به یک عنصر را نشان می دهد. این خصوصیت می تواند مقداری بین 0.0 تا 1.0 بگیرد به شکلی که: 1 یعنی شفافیت کامل که میتوانیم عنصر را به صورت کامل ببینیم و 0یعنی هیچ دیدی نسبت به عنصر نداریم. برای درک بهتر به تصویر زیر نگاهی بیندازید:
Opacity در زبان CSS
در این مجموعه تصویر، سه تصویر وجود دارد که به ترتیب از سمت راست به چپ دارای opacity با مقدار های 1 (پیش فرض) و 0.5 و 0.2 هستند.
نکته: بحث Opacity رنگ با کم رنگ یا پر رنگ بودن آن متفاوت است! زمانی که یک رنگ «کم رنگ» باشد یا «روشن تر» باشد یعنی آن رنگ غلظت بالایی ندارد و مقدار رنگ سفید بیشتری مخلوط در خودش دارد بنابراین حتی اگر رنگی روشن باشد تصویر پشت آن دیده نمی شود اما اگر شفاف باشد یعنی به نسبت میزان شفافی آن می توان محتوای پشت آن را دید. به تصویر زیر توجه کنید:
تفاوت opacity با روشن تر بودن رنگ
در تصویر بالا پشت هر سه مربع رنگی، نوشته ی «عناصر پشت سر» را قرار داده ام اما این نوشته تنها در مربع سوم که opacity کمتری دارد قابل مشاهده است.
همچنین باید بدانید که در مرورگر های IE8 و نسخه های قبلی آن باید از (filter:alpha(opacity=x استفاده کنید. x می تواند مقادیری بین 0 تا 100 بگیرد:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPEhtml>
<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 propertyspecifies the transparency of an element.The lower the value,the more transparent:</p>
<p>Image with50%opacity:</p>
<img src="https://www.w3schools.com/css/img_forest.jpg"alt="Forest"width="170"height="100">
</body>
</html>
|
مشاهده ی خروجی در JSBin
کمی خلاق تر
یکی از کارهای جالبی که می توان در این زمینه انجام داد، ترکیب opacity و hover: است. به مثال زیر توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPEhtml>
<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 propertyisoften used together with the:hover selector tochange the opacity on mouse-over:</p>
<img src="https://www.w3schools.com/css/img_forest.jpg"alt="Forest"width="170"height="100">
<img src="https://www.w3schools.com/css/img_mountains.jpg"alt="Mountains"width="170"height="100">
<img src="https://www.w3schools.com/css/img_5terre.jpg"alt="Italy"width="170"height="100">
<pdir='rtl'><b>هشدار:</b>درمرورگرinternet explorer,بایدمقدارDOCTYPE!رامشخصکردهباشیدتاسلکتورhover:کارکند.درغیراینصورتتنهارویلینکهاکارخواهدکرد.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
نحوه ی کار این مثال بدین صورت است که ابتدا مانند مثال قبلی این مقاله، مقدار opacity را کاهش دادیم. سپس با استفاده از سلکتور hover: به CSS گفته ایم که اگر کاربر موس خود را روی تصویری بیاورد باید مقدار opacity به 1برگردانده شود. سپس اگر کاربر موس خود را از روی تصویر برداشت، باز مقدار opacity کم می شود (در مثال بالا 0.5) بنابراین شاهد این افکت خاص و جالب در خروجی کد خود می شویم.
ما می توانیم این مثال را به صورت وارونه نیز انجام دهیم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPEhtml>
<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 propertyisoften used together with the:hover selector tochange the opacity on mouse-over:</p>
<img src="https://www.w3schools.com/css/img_forest.jpg"alt="Forest"width="170"height="100">
<img src="https://www.w3schools.com/css/img_mountains.jpg"alt="Mountains"width="170"height="100">
<img src="https://www.w3schools.com/css/img_5terre.jpg"alt="Italy"width="170"height="100">
<pdir='rtl'><b>هشدار:</b>درمرورگرinternet explorer,بایدمقدارDOCTYPE!رامشخصکردهباشیدتاسلکتورhover:کارکند.درغیراینصورتتنهارویلینکهاکارخواهدکرد.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
مشکلات ارث بری (inheritance)
زمانی که از خاصیت opacity برای یک عنصر استفاده می کنیم، عناصر داخل آن (فرزندانش) نیز این خاصیت را به ارث می برند. به همین دلیل معمولا اگر عناصر پس زمینه را هدف opacity قرار دهیم، خواندن متن بسیار سخت می شود. به تصویر زیر نگاه کنید:
ارث بری opacity در عناصر فرزند که منجر به سخت تر شدن خواندن متن می شود.
بیایید این مثال را در حالت کد واقعی ببینیم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<!DOCTYPEhtml>
<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 propertytoadd transparency tothe background of an element,all of its childelements become transparent aswell.Thiscan make the text insideafully transparent element hard toread:</p>
<div class="first"><p>opacity0.1</p></div>
<div class="second"><p>opacity0.3</p></div>
<div class="third"><p>opacity0.6</p></div>
<div><p>opacity1(default)</p></div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
به نظر شما راه حل این مشکل چیست؟ راه حل ساده ی آن استفاده از رنگ های RGBA است.
در مقاله ی «قالب های رنگی در CSS» توضیح دادیم که همیشه نیازی به استفاده از قالب رنگی hex که با # شروع می شود نیست. قالب های رنگی متفاوتی وجود دارد و شما می توانید از هر کدام که خواستید استفاده کنید (به طور مثال RGB یا HSL و …). یکی از قالب های رنگی که مشکل ما را حل می کند قالب رنگی RGBA است چرا که alpha channel را نیز مقدار دهی می کند (حرف A در آخر RGBA)، یا به زبان ساده تر همان opacity را مدیریت می کند.
اگر به خاطر داشته باشید، ساختار استفاده از RGBA به صورت (rgba(red, green, blue, alpha بود و مقدار alpha می توانست بین 0 تا 1 باشد. در مثال زیر می خواهیم استفاده از خاصیت opacity به صورت جداگانه را با استفاده از RGBA مقایسه کنیم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!DOCTYPEhtml>
<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>opacity1</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 aswell asthe background color when using the opacity property.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
البته نیازی نیست که همیشه تنها از رنگ ها استفاده کنید بلکه می توانید از یک تصویر نیز بهره ببرید. در مثال زیر می خواهیم همین کار را انجام بدهیم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div.background {
background:url(https://www.w3schools.com/css/klematis.jpg)repeat;
border:2pxsolidblack;
}
div.transbox {
margin:30px;
background-color:#ffffff;
border:1pxsolidblack;
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>Thisissome text that isplaced inthe transparent box.</p>
</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
در این مثال ابتدا یک عنصر <div> ساخته ایم و به آن کلاس "class="background داده ایم. سپس یک تصویر پس زمینه و یک border برایش تعیین کرده ایم. بعد از آن یک <div> دیگر درون <div> قبلی ساخته و کلاس "class="transbox را به آن داده ایم. همانطور که می بینید <“div class=”transbox> یک رنگ پس زمینه و یک border دارد. در آخر با اضافه کردن مقدار opacity و یک متن، آن را تبدیل به محصول نهایی کرده ایم.
امیدوارم از این قسمت لذت برده باشید.
منبع: روکسو
چطور از فشرده ساز Winrar استفاده کنیم؟