ਆਪਣੀਆਂ ਤਸਵੀਰਾਂ ਨੂੰ ਸਟਾਈਲ ਕਰੋ ਅਤੇ ਸਟਾਇਲਾਂ ਵਿਚ ਚਿੱਤਰ ਵਰਤੋ
ਬਹੁਤ ਸਾਰੇ ਲੋਕ ਪਾਠ ਨੂੰ ਅਨੁਕੂਲ ਕਰਨ ਲਈ CSS , ਫ਼ੌਂਟ, ਰੰਗ, ਆਕਾਰ ਅਤੇ ਹੋਰ ਨੂੰ ਬਦਲਣ ਲਈ ਵਰਤਦੇ ਹਨ. ਪਰ ਇੱਕ ਗੱਲ ਜੋ ਬਹੁਤ ਸਾਰੇ ਲੋਕ ਅਕਸਰ ਭੁੱਲ ਜਾਂਦੇ ਹਨ ਉਹ ਹੈ ਕਿ ਤੁਸੀਂ ਚਿੱਤਰਾਂ ਦੇ ਨਾਲ ਵੀ CSS ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ.
ਚਿੱਤਰ ਨੂੰ ਖੁਦ ਬਦਲਣਾ
CSS ਤੁਹਾਨੂੰ ਪੇਜ਼ ਉੱਤੇ ਚਿੱਤਰ ਨੂੰ ਕਿਵੇਂ ਦਿਖਾਉਂਦਾ ਹੈ ਇਸਦਾ ਅਨੁਕੂਲ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ. ਇਹ ਤੁਹਾਡੇ ਪੰਨਿਆਂ ਨੂੰ ਇਕਸਾਰ ਰੱਖਣ ਲਈ ਸੱਚਮੁੱਚ ਲਾਭਦਾਇਕ ਹੋ ਸਕਦਾ ਹੈ ਸਾਰੇ ਚਿੱਤਰਾਂ ਉੱਤੇ ਸ਼ੈਲੀ ਸੈੱਟ ਕਰਕੇ, ਤੁਸੀਂ ਆਪਣੀਆਂ ਤਸਵੀਰਾਂ ਲਈ ਇੱਕ ਮਿਆਰੀ ਦਿੱਖ ਬਣਾਉਂਦੇ ਹੋ. ਕੁਝ ਚੀਜ਼ਾਂ ਜੋ ਤੁਸੀਂ ਕਰ ਸਕਦੇ ਹੋ:
- ਤਸਵੀਰਾਂ ਦੇ ਦੁਆਲੇ ਬਾਰਡਰ ਜਾਂ ਰੇਖਾ-ਚਿਤਰ ਸ਼ਾਮਲ ਕਰੋ
- ਸਬੰਧਿਤ ਤਸਵੀਰਾਂ ਦੇ ਆਲੇ ਦੁਆਲੇ ਰੰਗਦਾਰ ਬਾਰਡਰ ਹਟਾਓ
- ਚਿੱਤਰਾਂ ਦੀ ਚੌੜਾਈ ਅਤੇ / ਜਾਂ ਉਚਾਈ ਨੂੰ ਠੀਕ ਕਰਨਾ
- ਇੱਕ ਡਰਾਪ ਸ਼ੈਡੋ ਜੋੜੋ
- ਚਿੱਤਰ ਨੂੰ ਘੁੰਮਾਓ
- ਸਟਾਈਲ ਬਦਲੋ ਜਦੋਂ ਚਿੱਤਰ ਨੂੰ ਉੱਪਰ ਖਿੱਚਿਆ ਜਾਂਦਾ ਹੈ
ਆਪਣੀ ਤਸਵੀਰ ਦੇਣ ਨਾਲ ਸਰਹੱਦ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਬਹੁਤ ਵਧੀਆ ਥਾਂ ਹੈ. ਪਰ ਤੁਹਾਨੂੰ ਸਿਰਫ਼ ਸਰਹੱਦਾਂ ਤੋਂ ਵੱਧ ਧਿਆਨ ਦੇਣਾ ਚਾਹੀਦਾ ਹੈ - ਆਪਣੀ ਤਸਵੀਰ ਦੇ ਪੂਰੇ ਕਿਨਾਰੇ ਬਾਰੇ ਸੋਚੋ ਅਤੇ ਮਾਰਜਿਨ ਅਤੇ ਪੈਡਿੰਗ ਨੂੰ ਵੀ ਅਨੁਕੂਲ ਕਰੋ. ਇੱਕ ਪਤਲੀ ਕਾਲਾ ਬਾਰਡਰ ਦੇ ਨਾਲ ਇੱਕ ਚਿੱਤਰ ਸ਼ਾਨਦਾਰ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ, ਪਰ ਸਰਹੱਦ ਅਤੇ ਚਿੱਤਰ ਦੇ ਵਿਚਕਾਰ ਕੁਝ ਪੈਡਿੰਗ ਜੋੜਨਾ ਬਿਹਤਰ ਦਿਖ ਸਕਦਾ ਹੈ
img {
ਸੀਮਾ: 1 ਪੈਕਸ ਚੰਗੇ ਕਾਲਾ;
ਪੈਡਿੰਗ: 5 ਪੈਕਸ;
}
ਜਦੋਂ ਵੀ ਸੰਭਵ ਹੋਵੇ ਗੈਰ-ਸਜਾਵਟੀ ਚਿੱਤਰਾਂ ਨੂੰ ਹਮੇਸ਼ਾਂ ਲਿੰਕ ਕਰਨਾ ਇੱਕ ਵਧੀਆ ਵਿਚਾਰ ਹੈ ਪਰ ਜਦੋਂ ਤੁਸੀਂ ਕਰਦੇ ਹੋ, ਯਾਦ ਰੱਖੋ ਕਿ ਜ਼ਿਆਦਾਤਰ ਬ੍ਰਾਉਜ਼ਰਾਂ ਨੂੰ ਚਿੱਤਰ ਦੇ ਆਲੇ ਦੁਆਲੇ ਇੱਕ ਰੰਗੀਨ ਬਾਰਡਰ ਜੋੜਦੇ ਹਨ. ਭਾਵੇਂ ਤੁਸੀਂ ਬਾਰਡਰ ਨੂੰ ਬਦਲਣ ਲਈ ਉਪਰੋਕਤ ਕੋਡ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ, ਤਾਂ ਲਿੰਕ ਉਸ ਨੂੰ ਅਣਡਿੱਠਾ ਕਰ ਦੇਵੇਗਾ ਜਦੋਂ ਤੱਕ ਤੁਸੀਂ ਲਿੰਕ 'ਤੇ ਬਾਰਡਰ ਨੂੰ ਹਟਾ ਜਾਂ ਬਦਲ ਨਹੀਂ ਸਕਦੇ. ਅਜਿਹਾ ਕਰਨ ਲਈ ਤੁਹਾਨੂੰ ਸਬੰਧਿਤ ਤਸਵੀਰਾਂ ਦੇ ਆਲੇ ਦੁਆਲੇ ਸਰਹੱਦ ਨੂੰ ਹਟਾਉਣ ਜਾਂ ਬਦਲਣ ਲਈ CSS ਬੱਚੇ ਨਿਯੋਜਨ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ:
img> a {
ਬਾਰਡਰ: ਕੋਈ ਨਹੀਂ;
}
ਤੁਸੀਂ ਆਪਣੀ ਤਸਵੀਰਾਂ ਦੀ ਉਚਾਈ ਅਤੇ ਚੌੜਾਈ ਨੂੰ ਬਦਲਣ ਜਾਂ ਸੈਟ ਕਰਨ ਲਈ CSS ਨੂੰ ਵੀ ਵਰਤ ਸਕਦੇ ਹੋ. ਹਾਲਾਂਕਿ ਡਾਊਨਲੋਡ ਦੀ ਗਤੀ ਦੇ ਕਾਰਨ ਚਿੱਤਰ ਦੇ ਅਕਾਰ ਨੂੰ ਠੀਕ ਕਰਨ ਲਈ ਬਰਾਊਜ਼ਰ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦਾ ਕੋਈ ਵਧੀਆ ਵਿਚਾਰ ਨਹੀਂ ਹੈ, ਪਰ ਉਹ ਚਿੱਤਰਾਂ ਨੂੰ ਮੁੜ ਆਕਾਰ ਦੇਣ ਵੇਲੇ ਬਹੁਤ ਵਧੀਆ ਪ੍ਰਾਪਤ ਕਰ ਰਹੇ ਹਨ ਤਾਂ ਜੋ ਉਹ ਹਾਲੇ ਵੀ ਵਧੀਆ ਦੇਖ ਸਕਣ. ਅਤੇ CSS ਦੇ ਨਾਲ ਤੁਸੀਂ ਆਪਣੀਆਂ ਤਸਵੀਰਾਂ ਨੂੰ ਇੱਕ ਸਧਾਰਣ ਚੌੜਾਈ ਜਾਂ ਉਚਾਈ ਤੇ ਸੈਟ ਕਰ ਸਕਦੇ ਹੋ ਜਾਂ ਕੰਟੇਨਰ ਦੇ ਸਬੰਧ ਵਿੱਚ ਹੋਣ ਵਾਲੇ ਮਾਪਾਂ ਨੂੰ ਵੀ ਸੈਟ ਕਰ ਸਕਦੇ ਹੋ.
ਯਾਦ ਰੱਖੋ, ਜਦੋਂ ਤੁਸੀਂ ਪ੍ਰਤੀਬਿੰਬਾਂ ਦਾ ਆਕਾਰ ਬਦਲਦੇ ਹੋ, ਵਧੀਆ ਨਤੀਜਿਆਂ ਲਈ, ਤੁਹਾਨੂੰ ਸਿਰਫ ਇੱਕ ਹੀ ਮਾਪ ਨੂੰ ਬਦਲਣਾ ਚਾਹੀਦਾ ਹੈ - ਉਚਾਈ ਜਾਂ ਚੌੜਾਈ. ਇਹ ਇਸ ਗੱਲ ਨੂੰ ਮਨਜ਼ੂਰ ਕਰੇਗਾ ਕਿ ਚਿੱਤਰ ਆਪਣਾ ਪੱਖ ਅਨੁਪਾਤ ਰੱਖਦਾ ਹੈ, ਅਤੇ ਇਹ ਅਜੀਬੋ ਨਹੀਂ ਦਿੱਸਦਾ. ਦੂਜੀ ਵੈਲਯੂ ਨੂੰ ਆਟੋ ਦੇ ਲਈ ਸੈਟ ਕਰੋ ਜਾਂ ਬਰਾਊਜ਼ਰ ਨੂੰ ਅਨੁਪਾਤ ਅਨੁਪਾਤ ਨੂੰ ਜਾਰੀ ਰੱਖਣ ਲਈ ਕਹਿਣ ਲਈ ਛੱਡੋ.
img {
ਚੌੜਾਈ: 50%;
ਉਚਾਈ: ਆਟੋ;
}
CSS3 ਇਸ ਸਮੱਸਿਆ ਦਾ ਨਵੇਂ ਸੁਭਾਅ ਆਬਜੈਕਟ ਅਤੇ ਆਬਜੈਕਟ-ਪੋਜ਼ਿਸ਼ਨ ਨਾਲ ਹੱਲ ਮੁਹੱਈਆ ਕਰਦਾ ਹੈ. ਇਹਨਾਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨਾਲ ਤੁਸੀਂ ਅਸਲ ਚਿੱਤਰ ਉਚਾਈ ਅਤੇ ਚੌੜਾਈ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਦੇ ਯੋਗ ਹੋਵੋਗੇ ਅਤੇ ਆਸਪੈਕਟ ਅਨੁਪਾਤ ਨੂੰ ਕਿਵੇਂ ਵਰਤਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ. ਇਹ ਤੁਹਾਡੇ ਚਿੱਤਰਾਂ ਦੇ ਚਾਰਟਰਬੌਕਸਿੰਗ ਪ੍ਰਭਾਵ ਬਣਾ ਸਕਦਾ ਹੈ ਜਾਂ ਲੋੜੀਂਦੇ ਆਕਾਰ ਵਿਚ ਫਿੱਟ ਕਰਨ ਲਈ ਚਿੱਤਰ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦਾ ਹੈ
ਹਾਲਾਂਕਿ CSS3 ਆਬਜੈਕਟ-ਫਿਟ ਅਤੇ ਔਬਜੈਕਟ-ਪੋਜ਼ਿਸ਼ਨ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਜੇ ਵਿਆਪਕ ਤੌਰ ਤੇ ਸਮਰਥਿਤ ਨਹੀਂ ਹਨ, ਇੱਥੇ ਹੋਰ CSS3 ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਹਨ ਜੋ ਕਿ ਜ਼ਿਆਦਾਤਰ ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਚੰਗੀ ਤਰਾਂ ਸਮਰਥਿਤ ਹਨ ਜੋ ਤੁਸੀਂ ਆਪਣੀਆਂ ਤਸਵੀਰਾਂ ਨੂੰ ਸੋਧਣ ਲਈ ਵਰਤ ਸਕਦੇ ਹੋ. ਡਰਾਪ ਸ਼ੈੱਡੋ, ਗੋਲ ਕੋਨਰਾਂ, ਅਤੇ ਬਦਲਣ ਵਾਲੀਆਂ ਚੀਜ਼ਾਂ ਜਿਵੇਂ ਕਿ ਘੁੰਮਾਓ, ਟੇਕ ਕਰੋ ਜਾਂ ਆਪਣੀਆਂ ਤਸਵੀਰਾਂ ਨੂੰ ਹਟਾਓ ਜਿਵੇਂ ਕਿ ਬਹੁਤ ਸਾਰੇ ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਹੁਣ ਕੰਮ ਹੈ. ਤਦ ਤੁਸੀਂ ਚਿੱਤਰ ਨੂੰ ਬਦਲਣ ਲਈ, ਜਾਂ ਕਲਿੱਕ ਕੀਤੇ, ਜਾਂ ਕੁਝ ਸਮੇਂ ਬਾਅਦ ਬਸ CSS ਬਦਲਣ ਲਈ ਵਰਤ ਸਕਦੇ ਹੋ.
ਬੈਕਗਰਾਊਂਡ ਦੇ ਰੂਪ ਵਿੱਚ ਚਿੱਤਰਾਂ ਦਾ ਇਸਤੇਮਾਲ ਕਰਨਾ
CSS ਤੁਹਾਡੇ ਚਿੱਤਰਾਂ ਦੇ ਨਾਲ ਫੈਂਸੀ ਬੈਕਗਰਾਊਂਡ ਬਣਾਉਣਾ ਸੌਖਾ ਬਣਾਉਂਦਾ ਹੈ
ਤੁਸੀਂ ਪੂਰੇ ਸਫ਼ੇ ਜਾਂ ਸਿਰਫ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਐਲੀਮੈਂਟ ਲਈ ਬੈਕਗਰਾਊਂਡ ਜੋੜ ਸਕਦੇ ਹੋ ਬੈਕਗਰਾਊਂਡ-ਚਿੱਤਰ ਦੀ ਸੰਪੱਤੀ ਦੇ ਨਾਲ ਪੰਨੇ ਤੇ ਬੈਕਗਰਾਊਂਡ ਚਿੱਤਰ ਬਣਾਉਣਾ ਆਸਾਨ ਹੈ:
ਸਰੀਰ {
ਪਿਛੋਕੜ-ਚਿੱਤਰ: url (ਪਿੱਠਭੂਮੀ. jpg);
}
ਬੈਕਗ੍ਰਾਉਂਡ ਨੂੰ ਸਿਰਫ ਇਕ ਤੱਤ 'ਤੇ ਰੱਖਣ ਲਈ ਸਰੀਰ ਦੇ ਚੋਣਕਾਰ ਨੂੰ ਸਫ਼ੇ' ਤੇ ਕਿਸੇ ਵਿਸ਼ੇਸ਼ ਤੱਤ ਨੂੰ ਬਦਲੋ.
ਇਕ ਹੋਰ ਦਿਲਚਸਪ ਗੱਲ ਜੋ ਤੁਸੀਂ ਚਿੱਤਰਾਂ ਨਾਲ ਕਰ ਸਕਦੇ ਹੋ ਇੱਕ ਬੈਕਗਰਾਊਂਡ ਚਿੱਤਰ ਬਣਾਉ ਜੋ ਬਾਕੀ ਪੰਨੇ ਦੇ ਨਾਲ ਸਕਰੋਲ ਨਹੀਂ ਕਰਦਾ - ਜਿਵੇਂ ਕਿ ਵਾਟਰਮਾਰਕ. ਤੁਸੀਂ ਸਟਾਈਲ ਬੈਕਟੀ-ਆਉਟਮੈਂਟ: ਫਿਕਸਡ; ਤੁਹਾਡੇ ਪਿਛੋਕੜ ਚਿੱਤਰ ਦੇ ਨਾਲ ਤੁਹਾਡੇ ਪਿਛੋਕੜ ਲਈ ਹੋਰ ਵਿਕਲਪਾਂ ਵਿੱਚ ਉਨ੍ਹਾਂ ਨੂੰ ਬੈਕਗ੍ਰਾਉਂਡ-ਦੁਹਰਾਇਆ ਪ੍ਰਾਪਰਟੀ ਦਾ ਇਸਤੇਮਾਲ ਕਰਕੇ ਸਿਰਫ ਖਿਤਿਜੀ ਜਾਂ ਲੰਬਕਾਰੀ ਨੂੰ ਟਾਇਲ ਕਰਨਾ ਸ਼ਾਮਲ ਹੈ.
ਬੈਕਗ੍ਰਾਉਂਡ-ਦੁਹਰਾਉ ਲਿਖੋ: ਦੁਹਰਾਓ- x; ਚਿੱਤਰ ਨੂੰ ਖਿਤਿਜੀ ਅਤੇ ਪਿਛੋਕੜ ਨੂੰ ਟਾਇਲ ਕਰਨ ਲਈ: ਦੁਹਰਾਈ- y; ਲੰਬਕਾਰੀ ਟਾਇਲ ਕਰਨ ਲਈ ਅਤੇ ਤੁਸੀਂ ਪਿਛੋਕੜ-ਸਥਿਤੀ ਦੀ ਜਾਇਦਾਦ ਦੇ ਨਾਲ ਆਪਣੇ ਪਿਛੋਕੜ ਦੀ ਤਸਵੀਰ ਨੂੰ ਸਥਿਤੀ ਦੇ ਸਕਦੇ ਹੋ
ਅਤੇ CSS3 ਤੁਹਾਡੇ ਪਿਛੋਕੜ ਦੇ ਨਾਲ ਨਾਲ ਹੋਰ ਸਟਾਈਲ ਲਈ ਜੋੜਦਾ ਹੈ. ਤੁਸੀਂ ਆਪਣੇ ਚਿੱਤਰਾਂ ਨੂੰ ਕਿਸੇ ਵੀ ਸਾਈਜ਼ ਦੀ ਪਿੱਠਭੂਮੀ ਅਨੁਸਾਰ ਫਿੱਟ ਕਰ ਸਕਦੇ ਹੋ ਜਾਂ ਵਿੰਡੋ ਆਕਾਰ ਨਾਲ ਸਕੇਲ ਕਰਨ ਲਈ ਬੈਕਗਰਾਊਂਡ ਚਿੱਤਰ ਸੈਟ ਕਰ ਸਕਦੇ ਹੋ. ਤੁਸੀਂ ਸਥਿਤੀ ਨੂੰ ਬਦਲ ਸਕਦੇ ਹੋ ਅਤੇ ਬੈਕਗਰਾਊਂਡ ਚਿੱਤਰ ਨੂੰ ਕਲਿਪ ਕਰ ਸਕਦੇ ਹੋ. ਪਰ CSS3 ਬਾਰੇ ਸਭ ਤੋਂ ਵਧੀਆ ਚੀਜਾਂ ਵਿੱਚੋਂ ਇੱਕ ਇਹ ਹੈ ਕਿ ਤੁਸੀਂ ਹੁਣ ਹੋਰ ਵੀ ਗੁੰਝਲਦਾਰ ਪ੍ਰਭਾਵ ਬਣਾਉਣ ਲਈ ਕਈ ਬੈਕਗ੍ਰਾਉਂਡ ਚਿੱਤਰਾਂ ਨੂੰ ਲੇਅਰ ਕਰ ਸਕਦੇ ਹੋ.
HTML5 ਚਿੱਤਰਾਂ ਦੀ ਸਹਾਇਤਾ ਕਰਦਾ ਹੈ
HTML5 ਵਿੱਚ ਅੰਦਾਜ਼ਾ ਤੱਤ ਕਿਸੇ ਵੀ ਅਜਿਹੇ ਚਿੱਤਰਾਂ ਦੇ ਦੁਆਲੇ ਰੱਖਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ ਜੋ ਦਸਤਾਵੇਜ਼ ਦੇ ਅੰਦਰ ਇਕੱਲੇ ਖੜ੍ਹੇ ਹੋ ਸਕਦੇ ਹਨ. ਇਸ ਬਾਰੇ ਸੋਚਣ ਦਾ ਇਕ ਤਰੀਕਾ ਇਹ ਹੈ ਕਿ ਚਿੱਤਰ ਨੂੰ ਅੰਤਿਕਾ ਵਿਚ ਦਿਖਾਇਆ ਜਾ ਸਕਦਾ ਹੈ, ਫੇਰ ਇਸ ਨੂੰ ਐਫਆਈਜੇਐਰ ਤੱਤ ਦੇ ਅੰਦਰ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ. ਤੁਸੀਂ ਫਿਰ ਆਪਣੇ ਚਿੱਤਰਾਂ ਵਿੱਚ ਸਟਾਈਲ ਜੋੜਨ ਲਈ ਉਸ ਤੱਤ ਅਤੇ FIGCAPTION ਐਲੀਮੈਂਟ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ