CSS ਦਾ ਇਸਤੇਮਾਲ ਕਰਕੇ ਜਵਾਬਦੇਹ ਡਿਜਾਈਨ ਚਿੱਤਰਾਂ ਨੂੰ ਕਿਵੇਂ ਜੋੜਨਾ ਹੈ
ਅੱਜ ਪ੍ਰਸਿੱਧ ਵੈਬਸਾਈਟਾਂ ਤੇ ਦੇਖੋ ਅਤੇ ਇੱਕ ਡਿਜ਼ਾਇਨ ਟ੍ਰੀਟਮੈਂਟ ਜਿਸ ਨੂੰ ਤੁਸੀਂ ਦੇਖਣਾ ਯਕੀਨੀ ਬਣਾਉਣਾ ਵੱਡਾ ਹੈ, ਸਕ੍ਰੀਨ-ਫੈਨੀਨਿੰਗ ਬੈਕਗ੍ਰਾਉਂਡ ਚਿੱਤਰਾਂ. ਇਹਨਾਂ ਚਿੱਤਰਾਂ ਨੂੰ ਜੋੜਨ ਦੇ ਨਾਲ ਚੁਣੌਤੀਆਂ ਵਿੱਚੋਂ ਇੱਕ ਇਹ ਹੈ ਕਿ ਵਧੀਆ ਅਭਿਆਸ ਤੋਂ ਇਹ ਆਉਂਦੀ ਹੈ ਕਿ ਵੈਬਸਾਈਟਾਂ ਨੂੰ ਵੱਖ ਵੱਖ ਸਕ੍ਰੀਨ ਅਕਾਰ ਅਤੇ ਡਿਵਾਈਸਾਂ ਤੇ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ - ਇੱਕ ਪ੍ਰਤੱਖ ਵੈੱਬ ਡਿਜਾਈਨ ਵਜੋਂ ਜਾਣਿਆ ਜਾਂਦਾ ਇੱਕ ਢੰਗ
ਕਿਉਂਕਿ ਤੁਹਾਡੀ ਵੈਬਸਾਈਟ ਦਾ ਲੇਆਉਟਸ ਬਦਲਦਾ ਹੈ ਅਤੇ ਵੱਖ ਵੱਖ ਸਕ੍ਰੀਨ ਅਕਾਰ ਦੇ ਨਾਲ ਸਕੇਲ ਕਰਦਾ ਹੈ, ਇਸ ਲਈ ਇਹ ਵੀ ਜ਼ਰੂਰੀ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ ਕਿ ਇਹ ਬੈਕਗ੍ਰਾਉਂਡ ਚਿੱਤਰ ਉਨ੍ਹਾਂ ਦੇ ਆਕਾਰ ਨੂੰ ਅਨੁਸਾਰ ਕਰੇ.
ਵਾਸਤਵ ਵਿੱਚ, ਇਹ "ਤਰਲ ਚਿੱਤਰ" ਜਵਾਬਦੇਹ ਵੈਬਸਾਈਟਾਂ (ਇੱਕ ਤਰਲ ਗਰਿੱਡ ਅਤੇ ਮੀਡੀਆ ਸਵਾਲਾਂ ਦੇ ਨਾਲ) ਦੇ ਮੁੱਖ ਭਾਗਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ. ਸ਼ੁਰੂ ਤੋਂ ਹੀ ਇਹ ਤਿੰਨ ਟੁਕੜੇ ਜਵਾਬਦੇਹ ਵੈਬ ਡਿਜ਼ਾਈਨ ਦਾ ਮੁੱਖ ਰੂਪ ਹੋ ਗਏ ਹਨ, ਪਰੰਤੂ ਜਦੋਂ ਇਹ ਸਾਈਟ ਲਈ ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲ ਇੰਨਲਾਈਨ ਚਿੱਤਰ ਜੋੜਨ ਲਈ ਕਾਫੀ ਸੌਖਾ ਰਿਹਾ ਹੈ (ਇਨਲਾਈਨ ਚਿੱਤਰ ਹਨ, ਜੋ ਕਿ HTML ਮਾਰਕਅਪ ਦੇ ਹਿੱਸੇ ਵਜੋਂ ਕੋਡ ਕੀਤੇ ਗਏ ਹਨ) ਇੱਕੋ ਹੀ ਪਿੱਠਭੂਮੀ ਚਿੱਤਰਾਂ (ਜੋ ਕਿ CSS ਬੈਕਪੈਕਪਮੈਂਟ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਸਫ਼ੇ ਵਿੱਚ ਸਟਾਇਲ ਕੀਤੀ ਗਈ ਹੈ) ਦੇ ਨਾਲ ਲੰਬੇ ਸਮੇਂ ਤੋਂ ਬਹੁਤ ਸਾਰੇ ਵੈਬ ਡਿਜ਼ਾਈਨਰਾਂ ਅਤੇ ਫਰੰਟ ਐਂਡ ਡਿਵੈਲਪਰਾਂ ਲਈ ਮਹੱਤਵਪੂਰਣ ਚੁਣੌਤੀ ਪ੍ਰਦਾਨ ਕੀਤੀ ਗਈ ਹੈ. ਸ਼ੁਕਰ ਹੈ ਕਿ CSS ਵਿੱਚ "ਬੈਕਗਰਾਊਂਡ-ਆਕਾਰ" ਪ੍ਰਾਪਰਟੀ ਨੂੰ ਜੋੜਨ ਨਾਲ ਇਹ ਸੰਭਵ ਹੋ ਗਿਆ ਹੈ
ਇੱਕ ਵੱਖਰੇ ਲੇਖ ਵਿੱਚ, ਮੈਂ ਇੱਕ ਵਿੰਡੋ ਵਿੱਚ ਫਿੱਟ ਕਰਨ ਵਾਲੀਆਂ ਤਸਵੀਰਾਂ ਨੂੰ ਖਿੱਚਣ ਲਈ CSS3 ਦੀ ਸੰਪੱਤੀ ਦੀ ਪਿੱਠਭੂਮੀ ਦਾ ਆਕਾਰ ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ, ਪਰ ਇਸ ਸੰਪਤੀ ਲਈ ਸ਼ਾਮਿਲ ਕਰਨ ਦਾ ਇੱਕ ਹੋਰ ਵਧੀਆ, ਹੋਰ ਉਪਯੋਗੀ ਤਰੀਕਾ ਵੀ ਹੈ. ਅਜਿਹਾ ਕਰਨ ਲਈ, ਅਸੀਂ ਹੇਠ ਲਿਖੀਆਂ ਸੰਪਤੀਆਂ ਅਤੇ ਮੁੱਲ ਸੁਮੇਲ ਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ:
ਬੈਕਗਰਾਊਂਡ-ਆਕਾਰ: ਕਵਰ;
ਕਵਰ ਕੀਵਰਡ ਪ੍ਰਾਪਰਟੀ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਵਿੰਡੋ ਨੂੰ ਫਿੱਟ ਕਰਨ ਲਈ ਚਿੱਤਰ ਨੂੰ ਸਕੇਲ ਕਰਨ ਲਈ ਦੱਸਦੀ ਹੈ, ਭਾਵੇਂ ਇਹ ਝਰੋਖੇ ਨੂੰ ਕਿੰਨੀ ਵੱਡੀ ਜਾਂ ਛੋਟੀ ਹੋਵੇ ਚਿੱਤਰ ਨੂੰ ਪੂਰੀ ਸਕਰੀਨ ਨੂੰ ਕਵਰ ਕਰਨ ਲਈ ਸਕੇਲ ਕੀਤਾ ਗਿਆ ਹੈ, ਪਰ ਅਸਲੀ ਅਨੁਪਾਤ ਅਤੇ ਪੱਖ ਅਨੁਪਾਤ ਬਰਕਰਾਰ ਰੱਖਿਆ ਗਿਆ ਹੈ, ਚਿੱਤਰ ਨੂੰ ਵਿਗਾੜ ਹੋਣ ਤੋਂ ਰੋਕਣਾ.
ਚਿੱਤਰ ਨੂੰ ਵਿੰਡੋ ਵਿੱਚ ਜਿੰਨਾ ਵੱਡਾ ਹੋ ਸਕੇ ਰੱਖਿਆ ਜਾਂਦਾ ਹੈ ਤਾਂ ਜੋ ਪੂਰੀ ਵਿੰਡੋ ਦੀ ਸਤਹ ਨੂੰ ਕਵਰ ਕੀਤਾ ਜਾ ਸਕੇ. ਇਸਦਾ ਅਰਥ ਇਹ ਹੈ ਕਿ ਤੁਹਾਡੇ ਕੋਲ ਤੁਹਾਡੇ ਪੰਨੇ ਜਾਂ ਚਿੱਤਰ ਉੱਤੇ ਕਿਸੇ ਵੀ ਤਰਾਂ ਦੀ ਖਰਾਬੀ ਵਿੱਚ ਕੋਈ ਖਾਲੀ ਥਾਂ ਨਹੀਂ ਹੋਵੇਗੀ, ਪਰ ਇਸ ਦਾ ਮਤਲਬ ਇਹ ਹੈ ਕਿ ਚਿੱਤਰ ਦੇ ਕੁਝ ਹਿੱਸੇ ਨੂੰ ਸਕਰੀਨ ਦੇ ਆਕਾਰ ਅਨੁਪਾਤ ਅਤੇ ਪ੍ਰਸ਼ਨ ਦੇ ਚਿੱਤਰ ਦੇ ਆਧਾਰ ਤੇ ਕੱਟ ਦਿੱਤਾ ਜਾ ਸਕਦਾ ਹੈ. ਮਿਸਾਲ ਦੇ ਤੌਰ ਤੇ, ਚਿੱਤਰਾਂ ਦੀ ਛਾਂ (ਚਿੱਤਰ, ਤਲ, ਖੱਬੇ ਜਾਂ ਸੱਜੇ) ਦੇ ਕਿਨਾਰਿਆਂ ਨੂੰ ਛਾਪੇ ਜਾ ਸਕਦੇ ਹਨ, ਇਹ ਇਸ ਗੱਲ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ ਕਿ ਤੁਸੀਂ ਪਿਛੋਕੜ-ਸਥਿਤੀ ਦੀ ਪ੍ਰਾਪਤੀ ਲਈ ਕਿਹੜੇ ਮੁੱਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ. ਜੇ ਤੁਸੀਂ ਬੈਕਗ੍ਰਾਉਂਡ ਨੂੰ "ਚੋਟੀ ਦੇ ਖੱਬੇ" ਤੇ ਰੱਖਦੇ ਹੋ, ਤਾਂ ਚਿੱਤਰ ਉੱਤੇ ਕੋਈ ਵੀ ਵਾਧੂ ਥੱਲੇ ਅਤੇ ਸੱਜੇ ਪਾਸੇ ਆਵੇਗੀ. ਜੇ ਤੁਸੀਂ ਬੈਕਗਰਾਊਂਡ ਚਿੱਤਰ ਨੂੰ ਕੇਂਦਰਿਤ ਕਰਦੇ ਹੋ, ਬਾਕੀ ਸਾਰੀਆਂ ਪਾਰਟੀਆਂ ਦਾ ਅੰਤ ਹੋ ਜਾਵੇਗਾ, ਪਰ ਜਦੋਂ ਇਹ ਜ਼ਿਆਦਾ ਫੈਲਿਆ ਹੋਇਆ ਹੈ, ਤਾਂ ਕਿਸੇ ਵੀ ਹਿੱਸੇ 'ਤੇ ਅਸਰ ਘੱਟ ਸਰਵਿਸ ਹੋਵੇਗਾ.
ਪਿਛੋਕੜ-ਆਕਾਰ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰਨੀ ਹੈ: ਕਵਰ;
ਆਪਣੀ ਪਿਛੋਕੜ ਦੀ ਤਸਵੀਰ ਬਣਾਉਂਦੇ ਸਮੇਂ, ਇੱਕ ਚਿੱਤਰ ਬਣਾਉਣਾ ਇੱਕ ਵਧੀਆ ਵਿਚਾਰ ਹੈ ਜੋ ਕਾਫ਼ੀ ਵੱਡਾ ਹੈ. ਜਦੋਂ ਕਿ ਬ੍ਰਾਉਜ਼ਰ ਵਿਜ਼ੁਅਲ ਗੁਣਵੱਤਾ ਉੱਤੇ ਨਜ਼ਰ ਆਉਣ ਵਾਲੇ ਪ੍ਰਭਾਵ ਤੋਂ ਬਿਨਾਂ ਛੋਟੀ ਜਿਹੀ ਚਿੱਤਰ ਬਣਾ ਸਕਦੇ ਹਨ, ਜਦੋਂ ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ ਇੱਕ ਆਕਾਰ ਨੂੰ ਅਸਲੀ ਆਕਾਰ ਤੋਂ ਵੱਡੇ ਆਕਾਰ ਵੱਲ ਖਿੱਚਦਾ ਹੈ, ਤਾਂ ਵਿਜ਼ੁਅਲ ਗੁਣਵੱਤਾ ਨੂੰ ਘਟਾ ਦਿੱਤਾ ਜਾਵੇਗਾ, ਬਲਰ ਅਤੇ ਪਿਕਿਲਾਟੇਡ ਹੋਣਾ. ਇਸਦਾ ਨਨੁਕਸਾਨ ਇਹ ਹੈ ਕਿ ਜਦੋਂ ਤੁਸੀਂ ਸਾਰੇ ਸਕ੍ਰੀਨਾਂ ਨੂੰ ਅਲੋਕਿਕ ਤਸਵੀਰਾਂ ਨੂੰ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹੋ ਤਾਂ ਤੁਹਾਡੇ ਪੰਨੇ ਦਾ ਪ੍ਰਦਰਸ਼ਨ ਹਿੱਟ ਹੁੰਦਾ ਹੈ
ਜਦੋਂ ਤੁਸੀਂ ਅਜਿਹਾ ਕਰਦੇ ਹੋ, ਤਾਂ ਇਹ ਤਸਵੀਰਾਂ ਨੂੰ ਡਾਊਨਲੋਡ ਸਪੀਡ ਅਤੇ ਵੈਬ ਡਲਿਵਰੀ ਲਈ ਠੀਕ ਢੰਗ ਨਾਲ ਤਿਆਰ ਕਰਨ ਲਈ ਯਕੀਨੀ ਬਣਾਓ. ਅਖੀਰ ਵਿੱਚ, ਤੁਹਾਨੂੰ ਇੱਕ ਵਿਸ਼ਾਲ ਫਰੋਜ਼ਨ ਸਾਈਜ਼ ਅਤੇ ਕੁਆਲਿਟੀ ਦੇ ਵਿਚਕਾਰ ਅਤੇ ਇੱਕ ਡਾਉਨਲੋਡ ਸਪੀਡ ਲਈ ਇੱਕ ਵਾਜਬ ਫਾਈਲ ਅਕਾਰ ਦੇ ਵਿਚਕਾਰ ਖੁਸ਼ੀ ਦਾ ਮਾਧਿਅਮ ਲੱਭਣ ਦੀ ਲੋੜ ਹੈ.
ਸਕੈਲਿੰਗ ਬੈਕਗਰਾਊਂਡ ਚਿੱਤਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੇ ਆਮ ਢੰਗਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਉਹ ਚਿੱਤਰ ਨੂੰ ਇੱਕ ਪੇਜ ਦੀ ਪੂਰੀ ਪਿਛੋਕੜ ਵਿੱਚ ਲੈਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਚਾਹੇ ਇਹ ਪੇਜ਼ ਚੌੜਾ ਹੈ ਅਤੇ ਇੱਕ ਡੈਸਕਟੌਪ ਕੰਪਿਊਟਰ ਤੇ ਜਾਂ ਬਹੁਤ ਘੱਟ ਵੇਖੀ ਜਾ ਰਹੀ ਹੈ ਅਤੇ ਇੱਕ ਹੈਂਡਹੈਲਡ, ਮੋਬਾਈਲ ਤੇ ਭੇਜੀ ਜਾ ਰਹੀ ਹੈ ਡਿਵਾਈਸਾਂ
ਆਪਣੇ ਚਿੱਤਰ ਨੂੰ ਆਪਣੇ ਵੈਬ ਹੋਸਟ ਤੇ ਅਪਲੋਡ ਕਰੋ ਅਤੇ ਇਸ ਨੂੰ ਬੈਕਗਰਾਊਂਡ ਚਿੱਤਰ ਦੇ ਰੂਪ ਵਿੱਚ ਆਪਣੇ CSS ਵਿੱਚ ਜੋੜੋ:
ਬੈਕਗਰਾਊਂਡ-ਚਿੱਤਰ: url (ਫਾਇਰ ਵਰਕਸ-ਓਵਰ-ਵਾਈਡ. jpg);
ਬੈਕਗ੍ਰਾਉਂਡ-ਦੁਹਰਾਉ: ਨਾ-ਦੁਹਰਾਈ;
ਪਿਛੋਕੜ-ਸਥਿਤੀ: ਕੇਂਦਰ ਕੇਂਦਰ;
ਪਿਛੋਕੜ-ਅਟੈਚਮੈਂਟ: ਨਿਸ਼ਚਿਤ;
ਪਹਿਲਾਂ ਬਰਾਊਜ਼ਰ ਨੂੰ ਪ੍ਰੀਫੈਕਸ CSS ਸ਼ਾਮਲ ਕਰੋ:
-webkit-background-size: cover;
-ਮੋਜ਼-ਬੈਕਗਰਾਊਂਡ-ਆਕਾਰ: ਕਵਰ;
-o- ਬੈਕਗਰਾਊਂਡ-ਆਕਾਰ: ਕਵਰ;
ਫਿਰ CSS ਵਿਸ਼ੇਸ਼ਤਾ ਜੋੜੋ:
ਬੈਕਗਰਾਊਂਡ-ਆਕਾਰ: ਕਵਰ;
ਵੱਖ ਵੱਖ ਚਿੱਤਰਾਂ ਦਾ ਇਸਤੇਮਾਲ ਕਰਨਾ
ਜਦੋਂ ਕਿ ਡੈਸਕਟੌਪ ਜਾਂ ਲੈਪਟਾਪ ਅਨੁਭਵ ਲਈ ਜਵਾਬਦੇਹ ਡਿਜ਼ਾਈਨ ਮਹੱਤਵਪੂਰਨ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਵੈਬ ਨੂੰ ਐਕਸੈਸ ਕਰਨ ਵਾਲੀਆਂ ਡਿਵਾਈਸਾਂ ਦੀ ਭਿੰਨਤਾ ਕਾਫ਼ੀ ਵਧ ਜਾਂਦੀ ਹੈ ਅਤੇ ਇਸਦੇ ਨਾਲ ਸਕ੍ਰੀਨ ਦੇ ਇੱਕ ਵੱਡੇ ਪ੍ਰਕਾਰ ਦੇ ਆਕਾਰ ਮਿਲਦੇ ਹਨ.
ਜਿਵੇਂ ਕਿ ਪਹਿਲਾਂ ਜ਼ਿਕਰ ਕੀਤਾ ਗਿਆ ਹੈ, ਉਦਾਹਰਨ ਲਈ, ਇੱਕ ਸਮਾਰਟਫੋਨ ਤੇ ਇੱਕ ਬਹੁਤ ਵੱਡਾ ਜਵਾਬਦੇਹ ਪਿੱਠਭੂਮੀ ਚਿੱਤਰ ਨੂੰ ਲੋਡ ਕਰਨਾ, ਇੱਕ ਕੁਸ਼ਲ ਜਾਂ ਬੈਂਡਵਿਡਥ-ਚੇਤੰਨ ਡਿਜ਼ਾਈਨ ਨਹੀਂ ਹੈ.
ਜਾਣੋ ਕਿ ਤੁਸੀਂ ਉਹਨਾਂ ਚਿੱਤਰਾਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਤ ਕਰਨ ਲਈ ਮੀਡੀਆ ਸਵਾਲਾਂ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰ ਸਕਦੇ ਹੋ ਜੋ ਉਹਨਾਂ ਡਿਵਾਈਸਾਂ ਲਈ ਉਚਿਤ ਹੋਵੇਗਾ ਜਿਨ੍ਹਾਂ ਤੇ ਉਹ ਪ੍ਰਦਰਸ਼ਿਤ ਹੋਣਗੇ, ਅਤੇ ਮੋਬਾਈਲ ਡਿਵਾਈਸਿਸ ਦੇ ਨਾਲ ਤੁਹਾਡੀ ਵੈਬਸਾਈਟ ਦੀ ਅਨੁਕੂਲਤਾ ਨੂੰ ਹੋਰ ਬਿਹਤਰ ਬਣਾਉਣਗੇ.
ਜੈਨਫਾਇਰ ਕ੍ਰਿਨਿਨ ਦੁਆਰਾ ਮੂਲ ਲੇਖ ਜੇਰਮੀ ਗਿਰਾਰਡ ਦੁਆਰਾ ਸੰਪਾਦਿਤ 9/12/17