CSS ਨਾਲ ਤਕਨੀਕ ਨੂੰ ਚਲਾਓ
ਜੇ ਤੁਸੀਂ ਕਿਸੇ ਵੈਬਸਾਈਟ ਨੂੰ ਡਿਜ਼ਾਈਨ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਹੋ ਸਕਦਾ ਹੈ ਕਿ ਤੁਹਾਨੂੰ ਕਿਸੇ ਵੈਬ ਪੇਜ ਤੇ ਨਿਸ਼ਚਿਤ ਬੈਕਗਰਾਊਂਡ ਚਿੱਤਰ ਜਾਂ ਵਾਟਰਮਾਰਕ ਕਿਵੇਂ ਬਣਾਉਣਾ ਹੈ, ਇਸ ਬਾਰੇ ਸਿੱਖਣ ਵਿੱਚ ਰੁਚੀ ਹੋ ਸਕਦੀ ਹੈ. ਇਹ ਇੱਕ ਆਮ ਡਿਜ਼ਾਈਨ ਇਲਾਜ ਹੈ ਜੋ ਕਾਫ਼ੀ ਸਮੇਂ ਤੋਂ ਆਨਲਾਈਨ ਪ੍ਰਸਿੱਧ ਹੈ. ਤੁਹਾਡੇ ਯਤਨਾਂ ਦੇ ਵੈਬ ਡਿਜ਼ਾਇਨ ਬੈਗ ਵਿੱਚ ਇਹ ਇੱਕ ਸੌਖਾ ਪ੍ਰਭਾਵ ਹੈ
ਜੇ ਤੁਸੀਂ ਇਸ ਤੋਂ ਪਹਿਲਾਂ ਜਾਂ ਬਿਨਾਂ ਕਿਸੇ ਕਿਸਮਤ ਤੋਂ ਪਹਿਲਾਂ ਇਹ ਕੀਤਾ ਹੈ, ਤਾਂ ਇਹ ਪ੍ਰਕਿਰਿਆ ਡਰਾਉਣੀ ਲੱਗ ਸਕਦੀ ਹੈ, ਪਰ ਅਸਲ ਵਿੱਚ ਇਹ ਬਿਲਕੁਲ ਮੁਸ਼ਕਲ ਨਹੀਂ ਹੈ. ਇਸ ਸੰਖੇਪ ਟਿਊਟੋਰਿਅਲ ਨਾਲ, ਤੁਸੀਂ CSS ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਮਿੰਟ ਦੇ ਇੱਕ ਮਾਮਲੇ ਵਿੱਚ ਤਕਨੀਕ ਦੀ ਮਹਾਰਤ ਲੈਣ ਲਈ ਲੋੜੀਂਦੀ ਜਾਣਕਾਰੀ ਪ੍ਰਾਪਤ ਕਰੋਗੇ.
ਸ਼ੁਰੂ ਕਰਨਾ
ਬੈਕਗਰਾਊਂਡ ਚਿੱਤਰ ਜਾਂ ਵਾਟਰਮਾਰਕ (ਜੋ ਅਸਲ ਵਿੱਚ ਬਹੁਤ ਹੀ ਹਲਕਾ ਬੈਕਗਰਾਊਂਡ ਚਿੱਤਰ ਹਨ) ਦਾ ਪ੍ਰਿੰਟ ਡਿਜ਼ਾਇਨ ਦਾ ਇਤਿਹਾਸ ਹੈ. ਦਸਤਾਵੇਜ਼ਾਂ ਵਿੱਚ ਉਹਨਾਂ ਨੂੰ ਕਾਪੀ ਕੀਤੇ ਜਾਣ ਤੋਂ ਰੋਕਣ ਲਈ ਉਹਨਾਂ ਉੱਤੇ ਲੰਬੇ ਵਾਟਰਮਾਰਕਸ ਸ਼ਾਮਲ ਕੀਤੇ ਗਏ ਹਨ ਇਸ ਤੋਂ ਇਲਾਵਾ, ਬਹੁਤ ਸਾਰੇ ਫਲਾਇਰ ਅਤੇ ਬਰੋਸ਼ਰ ਪ੍ਰਿੰਟਿਡ ਟੁਕੜੇ ਲਈ ਡਿਜ਼ਾਇਨ ਦੇ ਹਿੱਸੇ ਵੱਡੀਆਂ ਵੱਡੀਆਂ ਤਸਵੀਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ. ਵੈੱਬ ਡਿਜ਼ਾਈਨ ਨੇ ਲੰਬੇ ਸਮੇਂ ਤੋਂ ਪ੍ਰਿੰਟ ਅਤੇ ਪਿਛੋਕੜ ਵਾਲੇ ਚਿੱਤਰਾਂ ਦੀਆਂ ਸ਼ੈਲੀਆਂ ਨੂੰ ਉਧਾਰ ਲਿਆ ਹੈ.
ਇਹਨਾਂ ਵੱਡੇ ਬੈਕਗ੍ਰਾਉਂਡ ਚਿੱਤਰਾਂ ਨੂੰ ਹੇਠ ਲਿਖੀਆਂ ਤਿੰਨ CSS ਸਟਾਈਲ ਪ੍ਰਾਪਤੀਆਂ ਨਾਲ ਤਿਆਰ ਕਰਨਾ ਆਸਾਨ ਹੈ:
- ਬੈਕਗਰਾਊਂਡ-ਚਿੱਤਰ
- ਬੈਕਗ੍ਰਾਉਂਡ-ਦੁਹਰਾਓ
- ਬੈਕਗਰਾਊਂਡ-ਅਟੈਚਮੈਂਟ
- ਬੈਕਗਰਾਊਂਡ-ਆਕਾਰ
ਪਿੱਠਭੂਮੀ-ਚਿੱਤਰ
ਤੁਸੀਂ ਤਸਵੀਰ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ ਪਿਛੋਕੜ-ਚਿੱਤਰ ਦੀ ਵਰਤੋਂ ਕਰੋਗੇ ਜੋ ਤੁਹਾਡੇ ਵਾਟਰਮਾਰਕ ਦੇ ਤੌਰ ਤੇ ਵਰਤੀ ਜਾਏਗੀ. ਇਹ ਸਟਾਈਲ ਬਸ ਤੁਹਾਡੇ ਚਿੱਤਰ ਉੱਤੇ ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਚਿੱਤਰ ਲੋਡ ਕਰਨ ਲਈ ਇੱਕ ਫਾਈਲ ਪਾਥ ਵਰਤਦੀ ਹੈ, ਸੰਭਾਵਤ ਤੌਰ ਤੇ "images" ਨਾਮ ਦੀ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ.
ਪਿਛੋਕੜ-ਚਿੱਤਰ: url (/images/page-background.jpg);
ਇਹ ਮਹੱਤਵਪੂਰਨ ਹੈ ਕਿ ਚਿੱਤਰ ਇੱਕ ਆਮ ਚਿੱਤਰ ਨਾਲੋਂ ਹਲਕਾ ਜਾਂ ਵਧੇਰੇ ਪਾਰਦਰਸ਼ੀ ਹੋਵੇ. ਇਹ ਉਹ "ਵਾਟਰਮਾਰਕ" ਦਿੱਖ ਬਣਾਵੇਗਾ ਜਿਸ ਵਿੱਚ ਇੱਕ ਅਰਧ-ਪਾਰਦਰਸ਼ੀ ਚਿੱਤਰ ਟੈਕਸਟ, ਗਰਾਫਿਕਸ, ਅਤੇ ਵੈਬ ਪੇਜ ਦੇ ਹੋਰ ਮੁੱਖ ਤੱਤਾਂ ਪਿੱਛੇ ਪਿਆ ਹੈ. ਇਸ ਪਗ ਦੇ ਬਗੈਰ, ਬੈਕਗਰਾਊਂਡ ਚਿੱਤਰ ਤੁਹਾਡੇ ਪੰਨਿਆਂ ਦੀ ਜਾਣਕਾਰੀ ਨਾਲ ਮੁਕਾਬਲਾ ਕਰੇਗਾ ਅਤੇ ਇਸ ਨੂੰ ਪੜ੍ਹਨਾ ਮੁਸ਼ਕਲ ਬਣਾ ਦੇਵੇਗਾ.
ਤੁਸੀਂ ਕਿਸੇ ਵੀ ਸੰਪਾਦਨ ਪ੍ਰੋਗਰਾਮ ਵਿੱਚ ਬੈਕਗਰਾਊਂਡ ਚਿੱਤਰ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰ ਸਕਦੇ ਹੋ ਜਿਵੇਂ ਕਿ Adobe Photoshop.
ਪਿਛੋਕੜ-ਦੁਹਰਾਓ
ਬੈਕਗ੍ਰਾਉਂਡ-ਦੁਹਰਾਉਣਾ ਜਾਇਦਾਦ ਅਗਲੇ ਆਉਂਦੇ ਹਨ. ਜੇ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਤੁਹਾਡੀ ਤਸਵੀਰ ਵੱਡੀ ਵਾਟਰਮਾਰਕ-ਸ਼ੈਲੀ ਗ੍ਰਾਫਿਕ ਹੋਵੇ, ਤਾਂ ਤੁਸੀਂ ਇਸ ਪ੍ਰਾਪਰਟੀ ਦੀ ਵਰਤੋਂ ਕਰੋਗੇ ਤਾਂ ਕਿ ਇਹ ਚਿੱਤਰ ਸਿਰਫ ਇਕ ਵਾਰ ਦਿਖਾਵੇ.
ਬੈਕਗ੍ਰਾਉਂਡ-ਦੁਹਰਾਉ: ਨਾ-ਦੁਹਰਾਈ;
"ਨੋ-ਰਿਕੁਟ" ਪ੍ਰਾਪਰਟੀ ਦੇ ਬਗੈਰ, ਡਿਫਾਲਟ ਇਹ ਹੈ ਕਿ ਚਿੱਤਰ ਦੁਬਾਰਾ ਪੇਜ਼ ਉੱਤੇ ਦੁਹਰਾਇਆ ਜਾਵੇਗਾ. ਇਹ ਬਹੁਤ ਆਧੁਨਿਕ ਵੈਬ ਪੇਜ ਡਿਜ਼ਾਈਨ ਵਿਚ ਅਣਚੱਲੇ ਹੈ, ਇਸ ਲਈ ਇਸ ਸਟਾਈਲ ਨੂੰ ਤੁਹਾਡੇ CSS ਵਿਚ ਜ਼ਰੂਰੀ ਸਮਝਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ.
ਬੈਕਗਰਾਊਂਡ-ਅਟੈਚਮੈਂਟ
ਬੈਕਗਰਾਊਂਡ-ਅਟੈਚਮੈਂਟ ਉਹ ਸੰਪਤੀ ਹੈ ਜੋ ਕਈ ਵੈਬ ਡਿਜ਼ਾਇਨਰ ਇਸ ਬਾਰੇ ਭੁੱਲ ਜਾਂਦੇ ਹਨ. ਜਦੋਂ ਤੁਸੀਂ "ਨਿਸ਼ਚਿਤ" ਜਾਇਦਾਦ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ ਤਾਂ ਇਸਦਾ ਇਸਤੇਮਾਲ ਕਰਨ ਨਾਲ ਤੁਹਾਡਾ ਬੈਕਗਰਾਊਂਡ ਚਿੱਤਰ ਸਥਿਰ ਹੋ ਜਾਂਦਾ ਹੈ. ਇਹ ਉਹ ਚਿੱਤਰ ਹੈ ਜੋ ਸਫ਼ੇ ਉੱਤੇ ਇੱਕ ਵਾਟਰਮਾਰਕ ਤੇ ਨਿਸ਼ਚਿਤ ਕੀਤਾ ਗਿਆ ਹੈ.
ਇਸ ਜਾਇਦਾਦ ਲਈ ਮੂਲ ਮੁੱਲ "ਸਕਰੋਲ ਕਰੋ." ਜੇਕਰ ਤੁਸੀਂ ਪਿਛੋਕੜ-ਅਟੈਚਮੈਂਟ ਦੇ ਮੁੱਲ ਨੂੰ ਨਹੀਂ ਨਿਸ਼ਚਤ ਕਰਦੇ ਹੋ, ਤਾਂ ਬੈਕਗ੍ਰਾਉਂਡ ਬਾਕੀ ਦੇ ਪੰਨੇ ਦੇ ਨਾਲ ਸਕ੍ਰੌਲ ਕਰੇਗਾ.
ਪਿਛੋਕੜ-ਅਟੈਚਮੈਂਟ: ਨਿਸ਼ਚਿਤ;
ਬੈਕਗਰਾਊਂਡ-ਆਕਾਰ
ਪਿਛੋਕੜ-ਅਕਾਰ ਇੱਕ ਨਵੀਂ CSS ਸੰਪੱਤੀ ਹੈ ਇਹ ਤੁਹਾਨੂੰ ਉਸ ਵਿਊਪੋਰਟ ਦੇ ਅਧਾਰ ਤੇ ਬੈਕਗਰਾਊਂਡ ਦਾ ਆਕਾਰ ਲਗਾਉਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ ਜੋ ਇਹ ਦੇਖੇ ਜਾ ਰਹੇ ਹਨ. ਇਹ ਜਵਾਬਦਾਰੀਆਂ ਵੈਬਸਾਈਟਾਂ ਲਈ ਬਹੁਤ ਸਹਾਇਕ ਹੈ ਜੋ ਵੱਖ ਵੱਖ ਡਿਵਾਈਸਾਂ ਤੇ ਵੱਖ- ਵੱਖ ਸਾਈਟਾਂ ਤੇ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨਗੀਆਂ.
ਬੈਕਗਰਾਊਂਡ-ਆਕਾਰ: ਕਵਰ;
ਇਸ ਜਾਇਦਾਦ ਲਈ ਤੁਸੀਂ ਦੋ ਉਪਯੋਗੀ ਮੁੱਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ:
- ਕਵਰ - ਪਿਛੋਕੜ ਦੀ ਪਿੱਠਭੂਮੀ ਤਾਂ ਜੋ ਜਾਂ ਤਾਂ ਪੂਰੀ ਚੌੜਾਈ ਜਾਂ ਪੂਰੀ ਉਚਾਈ ਦਿਖਾਈ ਦੇਵੇ. ਇਸਦਾ ਮਤਲਬ ਇਹ ਹੈ ਕਿ ਚਿੱਤਰ ਦੇ ਕੁਝ ਹਿੱਸੇ ਪਰਦੇ ਤੇ ਨਹੀਂ ਵਿਖਾਈ ਦੇ ਸਕਦੇ ਹਨ ਪਰ ਇਹ ਸਾਰਾ ਖੇਤਰ ਕਵਰ ਕੀਤਾ ਜਾਵੇਗਾ.
- ਸ਼ਾਮਲ - ਚਿੱਤਰ ਨੂੰ ਸਕੇਲ ਕੀਤਾ ਗਿਆ ਹੈ ਤਾਂ ਜੋ ਪੂਰੀ ਤਰ੍ਹਾਂ ਦੀ ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ ਨੂੰ ਸਟਾਈਲ ਕਰਕੇ ਕੀਤਾ ਜਾ ਰਿਹਾ ਹੈ. ਚਿੱਤਰ ਨੂੰ ਕੱਟਿਆ ਨਹੀਂ ਜਾਂਦਾ, ਪਰ ਇਸ ਦਾ ਅਰਥ ਇਹ ਹੈ ਕਿ ਖੇਤਰ ਦੇ ਕੁਝ ਹਿੱਸਿਆਂ ਨੂੰ ਚਿੱਤਰ ਦੁਆਰਾ ਕਵਰ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਦਾ.
ਆਪਣੇ ਪੇਜ਼ ਤੇ CSS ਨੂੰ ਜੋੜਨਾ
ਉਪਰੋਕਤ ਸੰਪਤੀਆਂ ਅਤੇ ਉਹਨਾਂ ਦੇ ਮੁੱਲਾਂ ਨੂੰ ਸਮਝਣ ਤੋਂ ਬਾਅਦ, ਤੁਸੀਂ ਆਪਣੀਆਂ ਸਟਾਈਲ ਨੂੰ ਆਪਣੀ ਵੈਬਸਾਈਟ ਤੇ ਜੋੜ ਸਕਦੇ ਹੋ.
ਜੇ ਤੁਸੀਂ ਇੱਕ-ਪੰਨੇ ਦੀ ਸਾਈਟ ਬਣਾ ਰਹੇ ਹੋ ਤਾਂ ਆਪਣੇ ਵੈਬ ਪੇਜ ਦੇ HEAD ਤੇ ਹੇਠਾਂ ਲਿਖੋ. ਜੇਕਰ ਤੁਸੀਂ ਮਲਟੀ-ਪੇਜ ਸਾਈਟ ਬਣਾ ਰਹੇ ਹੋ ਅਤੇ ਇੱਕ ਬਾਹਰੀ ਸ਼ੀਟ ਦੀ ਸ਼ਕਤੀ ਦਾ ਫਾਇਦਾ ਉਠਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ ਇਸ ਨੂੰ ਇੱਕ ਬਾਹਰੀ ਸਟਾਈਲ ਸ਼ੀਟ ਦੇ CSS ਸ਼ੈਲੀਆਂ ਵਿੱਚ ਜੋੜੋ