CSS ਅਨੰਤਰਪਾਰਦਰਸ਼ਤਾ / ਪਾਰਦਰਸ਼ਤਾ
opacity ਇਹ ਅਟਰੀਬਿਊਟ ਐਲੀਮੈਂਟ ਦੀ ਅਨੰਤਰਪਾਰਦਰਸ਼ਤਾ/ਪਾਰਦਰਸ਼ਤਾ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ。
ਪਾਰਦਰਸ਼ੀ ਤਸਵੀਰ
opacity ਇਸ ਅਟਰੀਬਿਊਟ ਦਾ ਮੁੱਲ ਦੌਰਾਨ 0.0-1.0 ਹੈ। ਮੁੱਲ ਨੂੰ ਘੱਟ ਕਰਨ ਨਾਲ ਹੀ ਪਾਰਦਰਸ਼ਤਾ ਵਧਦੀ ਹੈ:
opacity 0.2
opacity 0.5
opacity 1
ਇੱਕ ਉਦਾਹਰਣ
img {
opacity: 0.5;
}
ਪਾਰਦਰਸ਼ੀ ਹੋਵੇਂ ਵਾਲੇ ਹੋਵੇਂ
opacity ਇਹ ਅਟਰੀਬਿਊਟ ਸਾਧਾਰਨ ਤੌਰ 'ਤੇ :hover ਸੈਲੈਕਟਰ ਨਾਲ ਮਿਲਾਕੇ ਇਹ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ ਕਿ ਮਾਉਸ ਉੱਪਰ ਰਹਿਣ ਉੱਤੇ ਅਨੰਤਰਪਾਰਦਰਸ਼ਤਾ ਬਦਲੇ ਜਾਵੇ:
ਇੱਕ ਉਦਾਹਰਣ
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
مثال کی توجیہ
ਪਹਿਲਾਂ ਦਾ CSS ਬਲਕ ਇੰਸਟੈਂਸ 1 ਵਿੱਚ ਦਿੱਤੇ ਕੋਡ ਨਾਲ ਮਿਲਦਾ ਹੈ। ਇਸ ਤੋਂ ਇਲਾਵਾ ਅਸੀਂ ਇੱਕ ਇਸਤਰਾਹਤ ਵੀ ਜੋੜੀਆਂ ਹਨ ਜਿਸ ਵਿੱਚ ਵਰਤੋਂਕਾਰੀ ਮਾਉਸ ਉੱਪਰ ਇੱਕ ਤਸਵੀਰ ਉੱਤੇ ਰਹਿੰਦੇ ਹਨ ਤਾਂ ਉਸ ਸਮੇਂ ਤਸਵੀਰ ਨੂੰ ਪਾਰਦਰਸ਼ੀ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਾਂ। ਇਹ CSS ਇਸ ਤਰ੍ਹਾਂ ਹੈ: opacity:1;.
ਜਦੋਂ ਮਾਉਸ ਦੀ ਨਿਸ਼ਾਨੀ ਚਿੱਤਰ ਤੋਂ ਬਾਹਰ ਹੋਵੇਗੀ ਤਾਂ ਚਿੱਤਰ ਮੁੜ ਤੋਂ ਪਾਰਦਰਤ ਹੋ ਜਾਵੇਗਾ。
ਮੁਕਤ ਸਥਿਤੀ ਵਿੱਚ ਮੁਕਾਬਲੇਬਾਜ਼ੀ ਦਾ ਉਦਾਹਰਣ:
ਇੱਕ ਉਦਾਹਰਣ
img:hover {
opacity: 0.5;
}
ਸਪਲੇਨ ਫਲੈਕਸ
ਵਰਤੋਂ opacity ਪੈਰਾਮੀਟਰ ਵਜੋਂ opacity ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਏਕਟ ਦੇ ਪਿੱਟੇ ਰੰਗ ਨੂੰ ਅਣਪਾਰਦਰਤਾ ਦਿੱਤੀ ਜਾਂਦੀ ਹੈ ਤਾਂ ਉਸ ਦੇ ਸਾਰੇ ਉਪ-ਏਕਟਾਂ ਨੂੰ ਇਹੋ ਅਣਪਾਰਦਰਤਾ ਪ੍ਰਤੀਕਿਰਿਆ ਮਿਲਦੀ ਹੈ: ਇਹ ਪੂਰੀ ਤਰ੍ਹਾਂ ਪਾਰਦਰਤ ਏਕਟ ਵਿੱਚ ਟੈਕਸਟ ਨੂੰ ਪੜ੍ਹਣ ਵਿੱਚ ਮੁਸ਼ਕਿਲ ਬਣਾ ਸਕਦਾ ਹੈ:
ਇੱਕ ਉਦਾਹਰਣ
div {
opacity: 0.3;
}
RGBA ਦੀ ਅਣਪਾਰਦਰਤਾ ਦੀ ਵਰਤੋਂ
ਜੇਕਰ ਤੁਸੀਂ ਵਾਧੂ ਉਪ-ਏਕਟਾਂ 'ਤੇ ਅਣਪਾਰਦਰਤਾ ਲਾਗੂ ਨਹੀਂ ਕਰਨੀ ਚਾਹੁੰਦੇ ਹੋ, ਜਿਵੇਂ ਉੱਪਰ ਦੇ ਉਦਾਹਰਣ ਵਿੱਚ ਦਿਖਾਇਆ ਗਿਆ ਹੈ ਤਾਂ RGBA ਰੰਗ ਮੁੱਲ ਦੀ ਵਰਤੋਂ ਕਰੋ।ਨਿਮਨ ਉਦਾਹਰਣ ਪਿੱਟੇ ਰੰਗ ਨੂੰ ਨਹੀਂ ਟੈਕਸਟ ਦੀ ਅਣਪਾਰਦਰਤਾ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ:
ਤੁਸੀਂ ਸਾਡੇ CSS 颜色 ਇਸ ਚੈਪਟਰ ਵਿੱਚ ਤੁਸੀਂ RGB ਨੂੰ ਰੰਗ ਮੁੱਲ ਵਜੋਂ ਵਰਤਣ ਦੇ ਬਾਰੇ ਹੋਰ ਜਾਣਕਾਰੀ ਸਿੱਖਿਆ ਹੈ।RGB ਰੰਗ ਮੁੱਲ ਤੋਂ ਇਲਾਵਾ，RGB ਰੰਗ ਮੁੱਲ ਨੂੰ alpha ਚੈਨਲ (RGBA) ਨਾਲ ਮਿਲਾ ਕੇ ਵੀ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ - ਇਹ ਚੈਨਲ ਰੰਗ ਦੀ ਅਣਪਾਰਦਰਤਾ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ。
RGBA ਰੰਗ ਮੁੱਲ ਨੂੰ rgba(red, green, blue, alpha) alpha ਪੈਰਾਮੀਟਰ 0.0 (ਪੂਰੀ ਰੂਪ ਤੋਂ ਪਾਰਦਰਤ) ਅਤੇ 1.0 (ਪੂਰੀ ਰੂਪ ਤੋਂ ਅਣਪਾਰਦਰ) ਦਰਮਿਆਨ ਦੇ ਅੰਕ ਹਨ。
ਸੁਝਾਅ:ਤੁਸੀਂ ਸਾਡੇ CSS 颜色 ਇਸ ਚੈਪਟਰ ਵਿੱਚ ਤੁਸੀਂ RGBA ਰੰਗ ਦੇ ਬਾਰੇ ਹੋਰ ਜਾਣਕਾਰੀ ਸਿੱਖਿਆ ਹੈ。
ਇੱਕ ਉਦਾਹਰਣ
div {
background: rgba(76, 175, 80, 0.3) /* ਅਣਪਾਰਦਰਤਾ 30% ਦਾ ਹਰੀ ਪਿੱਟਾ */
}
ਸਪਲੇਨ ਫਲੈਕਸ ਵਿੱਚ ਟੈਕਸਟ
ਇਹ ਸਪਲੇਨ ਫਲੈਕਸ ਦੇ ਅੰਦਰ ਮੌਜੂਦ ਟੈਕਸਟ ਹੈ。
ਇੱਕ ਉਦਾਹਰਣ
<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;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p> یہ شفاف فریج میں واقع متن ہے。</p>
</div>
</div>
</body>
</html>
مثال کی توجیہ
ابتدا میں، ہم نے پس منظر تصویر اور فریم والا <div> عناصر کی تخلیق کی (class="background"۔
بعد میں، ہم نے پہلے <div> میں دوسرے <div> کی تخلیق کی (class="transbox"۔
<div class="transbox"> کا پس منظر رنگ اور فریم اور اس div کا شفاف ہے۔
پرانی <div> میں، ہم نے <p> عناصر میں کچھ متن شامل کیا ہے۔
