CSS3 ਓਪਸਿਫੀ ਬਾਰੇ ਜਾਣੋ

ਆਪਣੀ ਪਿਛੋਕੜ ਬਣਾਉਣਾ ਪਾਰਦਰਸ਼ੀ

ਇਕ ਚੀਜ਼ ਜਿਹੜੀ ਤੁਸੀਂ ਆਸਾਨੀ ਨਾਲ ਪ੍ਰਿੰਟ ਡਿਜ਼ਾਈਨ ਵਿਚ ਕਰ ਸਕਦੇ ਹੋ ਪਰ ਵੈਬ ਤੇ ਨਹੀਂ ਹੈ ਇੱਕ ਚਿੱਤਰ ਜਾਂ ਰੰਗ ਦੀ ਬੈਕਗਰਾਊਂਡ ਤੇ ਓਵਰਲੇ ਟੈਕਸਟ ਹੈ, ਅਤੇ ਉਸ ਚਿੱਤਰ ਦੀ ਪਾਰਦਰਸ਼ਤਾ ਨੂੰ ਬਦਲੋ ਤਾਂ ਕਿ ਟੈਕਸਟ ਨੂੰ ਬੈਕਗਰਾਉਂਡ ਵਿੱਚ ਫਿੱਕਾ ਹੋ ਜਾਵੇ. ਪਰ CSS3 ਵਿੱਚ ਕੋਈ ਜਾਇਦਾਦ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਆਪਣੇ ਤੱਤਾਂ ਦੀ ਧੁੰਦਲੀ ਨੂੰ ਬਦਲਣ ਦੇਵੇਗੀ ਤਾਂ ਜੋ ਉਹ ਅੰਦਰ ਅਤੇ ਬਾਹਰ ਫੇਡ ਹੋ ਸਕਣ: ਧੁੰਦਲਾਪਨ

ਅਪਦਰਪਤਾ ਸੰਪੱਤੀ ਨੂੰ ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ

ਓਪੈਸਿਟੀ ਪ੍ਰਾਪਰਟੀ 0.0 ਤੋਂ 1.0 ਤੱਕ ਪਾਰਦਰਸ਼ਤਾ ਦੀ ਮਾਤਰਾ ਦਾ ਮੁੱਲ ਲੈਂਦੀ ਹੈ.

0.0 100% ਪਾਰਦਰਸ਼ੀ ਹੈ - ਇਸ ਤੋਂ ਬਿਲਕੁਲ ਹੇਠਾਂ ਕੋਈ ਵੀ ਐਲੀਮੈਂਟ ਪੂਰੀ ਤਰਾਂ ਦਿਖਾਏਗਾ. 1.0 100% ਅਪਾਰਦਰਸ਼ੀ ਹੈ- ਤੱਤ ਦੇ ਹੇਠਾਂ ਕੁਝ ਨਹੀਂ ਦਿਖਾਇਆ ਜਾਵੇਗਾ.

ਇਸ ਲਈ ਤੱਤ ਨੂੰ 50% ਪਾਰਦਰਸ਼ੀ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ, ਤੁਸੀਂ ਲਿਖੋਗੇ:

ਧੁੰਦਲਾਪਨ: 0.5;

ਕਾਰਵਾਈ ਵਿੱਚ ਓਪੈਸਿਟੀ ਦੇ ਕੁਝ ਉਦਾਹਰਣ ਵੇਖੋ

ਪੁਰਾਣੇ ਬਰਾਊਜ਼ਰ ਵਿੱਚ ਟੈਸਟ ਕਰਨ ਲਈ ਸੁਨਿਸ਼ਚਿਤ ਰਹੋ

ਨਾ ਤਾਂ IE 6 ਜਾਂ ਨਾ ਹੀ CSS3 ਦੀ ਨਿਰਪੱਖਤਾ ਦੀ ਜਾਇਦਾਦ ਦਾ ਸਮਰਥਨ ਕਰਦੇ ਹਨ. ਪਰ ਤੁਸੀਂ ਕਿਸਮਤ ਤੋਂ ਬਾਹਰ ਨਹੀਂ ਹੋ ਇਸਦੀ ਬਜਾਏ, IE ਇੱਕ ਮਾਈਕਰੋਸੌਫਟ-ਕੇਵਲ ਵਿਸ਼ੇਸ਼ਤਾ ਐਲਫ਼ਾ ਫਿਲਟਰ ਨੂੰ ਸਮਰਥਨ ਦਿੰਦਾ ਹੈ IE ਵਿੱਚ ਅਲਫ਼ਾ ਫਿਲਟਰਾਂ ਨੂੰ 0 (ਪੂਰੀ ਤਰਾਂ ਪਾਰਦਰਸ਼ੀ) ਤੋਂ 100 ਤੱਕ (ਪੂਰੀ ਤਰਾਰ) ਸਵੀਕਾਰ ਕਰੋ. ਇਸਲਈ, IE ਵਿੱਚ ਤੁਹਾਡੀ ਪਾਰਦਰਸ਼ਿਤਾ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ, ਤੁਹਾਨੂੰ ਆਪਣੀ ਧੁੰਦਲਾਪਨ ਨੂੰ 100 ਨਾਲ ਗੁਣਾ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ ਅਤੇ ਆਪਣੀਆਂ ਸਟਾਈਲ ਲਈ ਇਕ ਅਲਫ਼ਾ ਫਿਲਟਰ ਜੋੜੋ:

ਫਿਲਟਰ: ਐਲਫਾ (ਓਪੈਸਿਟੀ = 50);

ਐਲਫ਼ਾ ਫਿਲਟਰ ਐਕਸ਼ਨ ਵੇਖੋ (ਸਿਰਫ IE)

ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਅਗੇਤਰ ਵਰਤੋ

ਤੁਹਾਨੂੰ- moz- ਅਤੇ-webkit-prefixes ਦੀ ਵਰਤੋ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ ਤਾਂ ਕਿ ਮੋਜ਼ੀਲਾ ਅਤੇ ਵੈਬਕੈਟ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਪੁਰਾਣੇ ਵਰਜ਼ਨ ਵੀ ਇਸਨੂੰ ਸਮਰਥਨ ਦੇ ਸਕਣ:

-ਵੀਬੀਕਿਟ-ਓਪੈਸਿਟੀ: 0.5;
-ਮੋਜ-ਓਪੈਸਿਟੀ: 0.5;
ਧੁੰਦਲਾਪਨ: 0.5;

ਹਮੇਸ਼ਾਂ ਪਹਿਲਾਂ ਬਰਾਊਜ਼ਰ ਅਗੇਤਰ ਲਗਾਓ, ਅਤੇ ਵੈਧ CSS3 ਦੀ ਪ੍ਰਾਪਤੀ ਪਿੱਛੇ

ਪੁਰਾਣੇ ਮੋਜ਼ੀਲਾ ਅਤੇ ਵੈਬਕਿੱਟ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਬ੍ਰਾਉਜ਼ਰ ਪ੍ਰੀਫਿਕਸ ਦੀ ਜਾਂਚ ਕਰੋ.

ਤੁਸੀਂ ਚਿੱਤਰ ਨੂੰ ਪਾਰਦਰਸ਼ੀ ਬਣਾ ਸਕਦੇ ਹੋ

ਆਪਣੇ ਆਪ ਨੂੰ ਚਿੱਤਰ ਉੱਤੇ ਧੁੰਦਲਾਪਨ ਸੈਟ ਕਰੋ ਅਤੇ ਇਹ ਬੈਕਗਰਾਊਂਡ ਵਿੱਚ ਫੇਡ ਹੋ ਜਾਵੇਗਾ. ਇਹ ਬੈਕਗਰਾਊਂਡ ਚਿੱਤਰਾਂ ਲਈ ਅਸਲ ਲਾਭਦਾਇਕ ਹੈ

ਅਤੇ ਜੇਕਰ ਤੁਸੀਂ ਇੱਕ ਐਂਕਰ ਟੈਗ ਵਿੱਚ ਜੋੜਦੇ ਹੋ ਤਾਂ ਤੁਸੀਂ ਚਿੱਤਰ ਦੀ ਧੁੰਦਲਾਪਨ ਨੂੰ ਬਦਲ ਕੇ ਹੋਵਰ ਪ੍ਰਭਾਵ ਬਣਾ ਸਕਦੇ ਹੋ.

a: ਹੋਵਰ ਆਈਐਮ ਜੀ {
ਫਿਲਟਰ: ਐਲਫਾ (ਓਪੈਸਿਟੀ = 50)
ਫਿਲਟਰ: ਪ੍ਰੋਗਿਡ: ਡੀ ਐਕਸ ਇਮੇਜ ਟ੍ਰਾਂਸਫਾਰਮ. ਮਾਈਕ੍ਰੋਸੋਫਟ. ਐਲਾਫਾ (ਓਪੈਸਿਟੀ = 50)
-ਮੋਜ-ਓਪੈਸਿਟੀ: 0.5;
-ਵੀਬੀਕਿਟ-ਓਪੈਸਿਟੀ: 0.5;
ਧੁੰਦਲਾਪਨ: 0.5;
}

ਇਸ HTML ਤੇ ਪ੍ਰਭਾਵ ਪਾਉਂਦਾ ਹੈ:

ਉਪਰੋਕਤ ਸਟਾਈਲ ਅਤੇ ਐਚਟੀਐਚ ਵਿੱਚ ਕਾਰਵਾਈ ਕਰੋ.

ਆਪਣੀਆਂ ਤਸਵੀਰਾਂ 'ਤੇ ਪਾਠ ਪਾਓ

ਧੁੰਦਲਾਪਨ ਦੇ ਨਾਲ, ਤੁਸੀਂ ਇੱਕ ਚਿੱਤਰ ਉੱਤੇ ਟੈਕਸਟ ਪਾ ਸਕਦੇ ਹੋ ਅਤੇ ਤਸਵੀਰ ਨੂੰ ਮਿਟਾਉਣਾ ਵਿਖਾਈ ਦਿੰਦਾ ਹੈ ਜਿੱਥੇ ਇਹ ਟੈਕਸਟ ਹੈ,

ਇਹ ਤਕਨੀਕ ਥੋੜਾ ਮੁਸ਼ਕਲ ਹੈ, ਕਿਉਂਕਿ ਤੁਸੀਂ ਚਿੱਤਰ ਨੂੰ ਅਸੁਰੱਖਿਅਤ ਨਹੀਂ ਕਰ ਸਕਦੇ ਕਿਉਂਕਿ ਇਹ ਪੂਰੀ ਤਸਵੀਰ ਨੂੰ ਮਿਟਾ ਦੇਵੇਗਾ. ਅਤੇ ਤੁਸੀਂ ਟੈਕਸਟ ਬੌਕਸ ਦੀ ਘਾਟ ਨਹੀਂ ਕਰ ਸਕਦੇ, ਕਿਉਂਕਿ ਟੈਕਸਟ ਉਥੇ ਵੀ ਫੇਡ ਹੋਵੇਗਾ.

1. ਪਹਿਲਾਂ ਤੁਸੀਂ ਇੱਕ ਕੰਟੇਨਰ ਡੀਵੀਏ ਬਣਾਉਂਦੇ ਹੋ ਅਤੇ ਆਪਣੀ ਚਿੱਤਰ ਨੂੰ ਅੰਦਰ ਰੱਖ ਸਕਦੇ ਹੋ:

   
   

2. ਖਾਲੀ ਡੀ.ਆਈ.ਵੀ. ਨਾਲ ਚਿੱਤਰ ਨੂੰ ਮੰਨੋ- ਇਹ ਹੈ ਜੋ ਤੁਸੀਂ ਪਾਰਦਰਸ਼ੀ ਬਣਾਉਗੇ.

   
   
   

3. ਆਖ਼ਰੀ ਗੱਲ ਜੋ ਤੁਸੀਂ ਆਪਣੀ ਐਚ ਐਲ ਟੀ ਵਿੱਚ ਜੋੜਦੇ ਹੋ ਉਸ ਵਿਚ ਤੁਹਾਡੇ ਪਾਠ ਨਾਲ DIV ਹੈ:

   
   
   
   ਇਹ ਮੇਰਾ ਕੁੱਤਾ ਸ਼ਾਤਾ ਹੈ. ਕੀ ਉਹ ਬਹੁਤ ਵਧੀਆ ਨਹੀਂ ਹੈ!

4. ਤੁਸੀਂ ਇਸ ਨੂੰ CSS ਪੋਜਿੰਗ ਦੇ ਨਾਲ ਸਟਾਈਲ ਕਰਦੇ ਹੋ, ਚਿੱਤਰ ਦੇ ਉੱਪਰ ਪਾਠ ਨੂੰ ਰੱਖਣ ਲਈ. ਮੈਂ ਆਪਣਾ ਪਾਠ ਖੱਬੇ ਪਾਸੇ ਰੱਖ ਦਿੱਤਾ, ਪਰ ਤੁਸੀਂ ਇਸ ਨੂੰ ਖੱਬੇ ਪਾਸੇ ਬਦਲ ਕੇ ਸੱਜੇ ਪਾਸੇ ਰੱਖ ਸਕਦੇ ਹੋ: 0; ਜਾਇਦਾਦ ਸੱਜੇ: 0; .

   #image {
   ਸਥਿਤੀ: ਰਿਸ਼ਤੇਦਾਰ;
   ਚੌੜਾਈ: 170 ਪੈਕਸ;
   ਉਚਾਈ: 128px;
   ਹਾਸ਼ੀਆ: 0;
   }
   #text {
   ਸਥਿਤੀ: ਸੰਪੂਰਨ;
   ਸਿਖਰ: 0;
   ਖੱਬੇ: 0;
   ਚੌੜਾਈ: 60px;
   ਉਚਾਈ: 118px;
   ਪਿਛੋਕੜ: #fff;
   ਪੈਡਿੰਗ: 5 ਪੈਕਸ;
   }
   #text {
   ਫਿਲਟਰ: ਐਲਫਾ (ਓਪੈਸਿਟੀ = 70);
   ਫਿਲਟਰ: ਪ੍ਰੋਗਿਡ: ਡੀ ਐਕਸ ਇਮੇਜ ਟ੍ਰਾਂਸਫਾਰਮ. ਮਾਈਕ੍ਰੋਸੋਫਟ. ਐਲਾਫਾ (ਓਪੈਸਿਟੀ = 70);
   -ਮੋਜ-ਓਪੈਸਿਟੀ: 0.70;
   ਧੁੰਦਲਾਪਨ: 0.7;
   }
   #words {
   ਸਥਿਤੀ: ਸੰਪੂਰਨ;
   ਸਿਖਰ: 0;
   ਖੱਬੇ: 0;
   ਚੌੜਾਈ: 60px;
   ਉਚਾਈ: 118px;
   ਪਿਛੋਕੜ: ਪਾਰਦਰਸ਼ੀ;
   ਪੈਡਿੰਗ: 5 ਪੈਕਸ;
   }

ਦੇਖੋ ਕਿ ਇਹ ਕਿਵੇਂ ਲਗਦਾ ਹੈ