ಒಂದು ವೆಬ್ಸೈಟ್ಗೆ ರೆಸ್ಪಾನ್ಸಿವ್ ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳನ್ನು ಸೇರಿಸಲು ಹೇಗೆ

ಸಿಎಸ್ಎಸ್ ಬಳಸಿ ಪ್ರತಿಕ್ರಿಯಾಶೀಲರಾಗಿರುತ್ತಾರೆ ವಿನ್ಯಾಸ ಚಿತ್ರಗಳನ್ನು ಸೇರಿಸಲು ಹೇಗೆ

ಇಂದಿನ ಜನಪ್ರಿಯ ವೆಬ್ಸೈಟ್ಗಳನ್ನು ನೋಡಿ ಮತ್ತು ನೀವು ನೋಡಲು ಖಚಿತವಾಗಿರುವ ಒಂದು ವಿನ್ಯಾಸ ಚಿಕಿತ್ಸೆಯು ದೊಡ್ಡದಾಗಿದೆ, ಸ್ಕ್ರೀನ್-ಅಗಲವಾದ ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳನ್ನು ಹೊಂದಿದೆ. ಈ ಚಿತ್ರಗಳನ್ನು ಸೇರಿಸುವ ಸವಾಲುಗಳಲ್ಲಿ ವೆಬ್ಸೈಟ್ಗಳು ವಿಭಿನ್ನ ಪರದೆಯ ಗಾತ್ರಗಳು ಮತ್ತು ಸಾಧನಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸಬೇಕಾದ ಅತ್ಯುತ್ತಮ ಅಭ್ಯಾಸದಿಂದ ಬರುತ್ತದೆ - ಪ್ರತಿಕ್ರಿಯಾಶೀಲರಾಗಿರುತ್ತಾರೆ ವೆಬ್ ವಿನ್ಯಾಸ ಎಂದು ಕರೆಯಲ್ಪಡುವ ಒಂದು ವಿಧಾನ.

ವಿಭಿನ್ನ ಪರದೆಯ ಗಾತ್ರಗಳೊಂದಿಗೆ ನಿಮ್ಮ ವೆಬ್ಸೈಟ್ನ ವಿನ್ಯಾಸದ ಬದಲಾವಣೆಗಳು ಮತ್ತು ಮಾಪಕಗಳು ಇರುವುದರಿಂದ, ಈ ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳನ್ನು ಅವುಗಳ ಗಾತ್ರವನ್ನು ತಕ್ಕಂತೆ ಅಳತೆ ಮಾಡಬೇಕು.

ವಾಸ್ತವವಾಗಿ, ಈ "ದ್ರವ ಚಿತ್ರಗಳು" ಪ್ರತಿಕ್ರಿಯಾಶೀಲರಾಗಿರುತ್ತಾರೆ ವೆಬ್ಸೈಟ್ಗಳ ಪ್ರಮುಖ ತುಣುಕುಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ (ದ್ರವ ಗ್ರಿಡ್ ಮತ್ತು ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳೊಂದಿಗೆ). ಆ ಮೂರು ತುಣುಕುಗಳು ಪ್ರಾರಂಭದಿಂದಲೂ ಪ್ರತಿಕ್ರಿಯಾಶೀಲರಾಗಿರುತ್ತಾರೆ ವೆಬ್ ವಿನ್ಯಾಸದ ಪ್ರಧಾನವಾಗಿವೆ, ಆದರೆ ಒಂದು ಸೈಟ್ಗೆ ಪ್ರತಿಕ್ರಿಯಾಶೀಲರಾಗಿರುತ್ತಾರೆ ಇನ್ಲೈನ್ ​​ಇಮೇಜ್ಗಳನ್ನು ಸೇರಿಸಲು ಯಾವಾಗಲೂ ಸುಲಭವಾಗಿದ್ದರೂ (ಇನ್ಲೈನ್ ​​ಚಿತ್ರಗಳು ಎಚ್ಟಿಎಮ್ಎಲ್ ಮಾರ್ಕ್ಅಪ್ನ ಭಾಗವಾಗಿ ಮಾಡಲಾದ ಗ್ರಾಫಿಕ್ಸ್). ಹಿನ್ನೆಲೆ ಇಮೇಜ್ಗಳೊಂದಿಗೆ (ಸಿಎಸ್ಎಸ್ ಹಿನ್ನೆಲೆ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಪುಟಕ್ಕೆ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ) ಅನೇಕ ವೆಬ್ ವಿನ್ಯಾಸಕರು ಮತ್ತು ಫ್ರಂಟ್ ಎಂಡ್ ಡೆವಲಪರ್ಗಳಿಗೆ ಗಮನಾರ್ಹ ಸವಾಲನ್ನು ಒದಗಿಸಿದೆ. Thankfully, ಸಿಎಸ್ಎಸ್ ನಲ್ಲಿ "ಹಿನ್ನೆಲೆ ಗಾತ್ರದ" ಆಸ್ತಿಯ ಜೊತೆಗೆ ಇದು ಸಾಧ್ಯವಾಯಿತು.

ಒಂದು ಪ್ರತ್ಯೇಕ ಲೇಖನದಲ್ಲಿ, ನಾನು ವಿಂಡೋದಲ್ಲಿ ಹೊಂದಿಕೊಳ್ಳಲು ಚಿತ್ರಗಳನ್ನು ಹಿಗ್ಗಿಸಲು CSS3 ಆಸ್ತಿ ಹಿನ್ನೆಲೆ-ಗಾತ್ರವನ್ನು ಬಳಸುವುದು ಹೇಗೆ ಆವರಿಸಿದೆ, ಆದರೆ ಈ ಆಸ್ತಿಗಾಗಿ ನಿಯೋಜಿಸಲು ಇನ್ನೂ ಉತ್ತಮ, ಹೆಚ್ಚು ಉಪಯುಕ್ತ ಮಾರ್ಗವಿದೆ. ಇದನ್ನು ಮಾಡಲು, ನಾವು ಕೆಳಗಿನ ಆಸ್ತಿ ಮತ್ತು ಮೌಲ್ಯ ಸಂಯೋಜನೆಯನ್ನು ಬಳಸುತ್ತೇವೆ:

ಹಿನ್ನೆಲೆ-ಗಾತ್ರ: ಕವರ್;

ಕಿಟಕಿಯ ಆಸ್ತಿ ಎಷ್ಟು ದೊಡ್ಡದಾಗಿದೆ ಅಥವಾ ಚಿಕ್ಕದಾಗಿದೆ ಎಂಬುದನ್ನು ಲೆಕ್ಕಿಸದೆ, ಕಿಟಕಿಗೆ ಸರಿಹೊಂದುವಂತೆ ಚಿತ್ರವನ್ನು ಅಳೆಯಲು ಬ್ರೌಸರ್ ಕೀವರ್ಡ್ ಹೇಳುತ್ತದೆ. ಚಿತ್ರವು ಸಂಪೂರ್ಣ ಪರದೆಯನ್ನು ಒಳಗೊಳ್ಳಲು ಅಳತೆಮಾಡುತ್ತದೆ, ಆದರೆ ಮೂಲ ಅನುಪಾತಗಳು ಮತ್ತು ಆಕಾರ ಅನುಪಾತಗಳು ಸರಿಯಾಗಿ ಇರಿಸಲ್ಪಟ್ಟಿವೆ, ಚಿತ್ರವನ್ನು ಸ್ವತಃ ವಿರೂಪಗೊಳ್ಳದಂತೆ ತಡೆಯುತ್ತದೆ.

ಇಡೀ ಕಿಟಕಿ ಮೇಲ್ಮೈ ಮುಚ್ಚಿರುವುದರಿಂದ ಚಿತ್ರವನ್ನು ಕಿಟಕಿಯಲ್ಲಿ ಸಾಧ್ಯವಾದಷ್ಟು ದೊಡ್ಡದಾಗಿದೆ. ಇದರರ್ಥ ನಿಮ್ಮ ಪುಟದಲ್ಲಿ ಯಾವುದೇ ಖಾಲಿ ಸ್ಥಳಗಳು ಅಥವಾ ಚಿತ್ರದ ಯಾವುದೇ ಅಸ್ಪಷ್ಟತೆಯಿಲ್ಲ, ಆದರೆ ಇದರ ಅರ್ಥವೇನೆಂದರೆ ಪರದೆಯ ಆಕಾರ ಅನುಪಾತ ಮತ್ತು ಪ್ರಶ್ನೆಯಲ್ಲಿರುವ ಚಿತ್ರದ ಆಧಾರದ ಮೇಲೆ ಚಿತ್ರದ ಕೆಲವು ಭಾಗವನ್ನು ಸರಿಹೊಂದಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ಹಿನ್ನೆಲೆ-ಸ್ಥಾನದ ಆಸ್ತಿಗಾಗಿ ನೀವು ಬಳಸುವ ಮೌಲ್ಯಗಳ ಆಧಾರದ ಮೇಲೆ ಚಿತ್ರದ ಅಂಚುಗಳು (ಮೇಲಿನ, ಕೆಳಗೆ, ಎಡ, ಅಥವಾ ಬಲ) ಚಿತ್ರಗಳನ್ನು ಕತ್ತರಿಸಬಹುದು. ನೀವು ಹಿನ್ನಲೆ "ಮೇಲಿನ ಎಡ" ಗೆ ಓರಿಯಂಟ್ ಮಾಡಿದರೆ, ಚಿತ್ರದ ಮೇಲಿನ ಯಾವುದೇ ಹೆಚ್ಚುವರಿ ಭಾಗವು ಕೆಳಭಾಗ ಮತ್ತು ಬಲ ಬದಿಗಳಿಂದ ಹೊರಬರುತ್ತದೆ. ನೀವು ಹಿನ್ನೆಲೆ ಚಿತ್ರವನ್ನು ಕೇಂದ್ರೀಕರಿಸಿದರೆ, ಹೆಚ್ಚುವರಿ ಎಲ್ಲಾ ಬದಿಗಳಿಂದ ಹೊರಬರುತ್ತವೆ, ಆದರೆ ಆ ಹೆಚ್ಚುವರಿ ಹರಡುವಿಕೆಯಿಂದಾಗಿ, ಯಾವುದೇ ಒಂದು ಬದಿಯ ಮೇಲಿನ ಪರಿಣಾಮವು ಕಡಿಮೆ ಸರ್ವ್ ಆಗಿರುತ್ತದೆ.

ಹಿನ್ನೆಲೆ ಗಾತ್ರವನ್ನು ಹೇಗೆ ಬಳಸುವುದು: ಮುಖಪುಟ;

ನಿಮ್ಮ ಹಿನ್ನೆಲೆ ಚಿತ್ರವನ್ನು ರಚಿಸುವಾಗ, ಸಾಕಷ್ಟು ದೊಡ್ಡದಾದ ಚಿತ್ರವನ್ನು ರಚಿಸಲು ಇದು ಒಳ್ಳೆಯದು. ಬ್ರೌಸರ್ಗಳು ದೃಶ್ಯದ ಗುಣಮಟ್ಟದ ಮೇಲೆ ಗಮನಾರ್ಹವಾದ ಪ್ರಭಾವವಿಲ್ಲದೆಯೇ ಚಿತ್ರವನ್ನು ಚಿಕ್ಕದಾಗಿಸಬಹುದು, ಬ್ರೌಸರ್ ಅದರ ಮೂಲ ಆಯಾಮಗಳಿಗಿಂತ ದೊಡ್ಡದಾದ ಗಾತ್ರಕ್ಕೆ ಚಿತ್ರವೊಂದನ್ನು ಮಾಪನ ಮಾಡುವಾಗ, ದೃಶ್ಯ ಗುಣಮಟ್ಟವು ಕೆಳಮಟ್ಟಕ್ಕೊಳಗಾಗುತ್ತದೆ ಮತ್ತು ತೆಳುವಾಗಿದೆ ಮತ್ತು ಪಿಕ್ಸೆಲ್ ಆಗಿರುತ್ತದೆ. ಇದಕ್ಕೆ ಕಾರಣವೆಂದರೆ ನೀವು ಎಲ್ಲಾ ಪರದೆಯಲ್ಲೂ ದೈತ್ಯ ಚಿತ್ರಗಳನ್ನು ತಲುಪಿಸುವಾಗ ನಿಮ್ಮ ಪುಟವು ಕಾರ್ಯಕ್ಷಮತೆಯ ಹಿಟ್ ಅನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ.

ನೀವು ಇದನ್ನು ಮಾಡುವಾಗ , ಡೌನ್ಲೋಡ್ ವೇಗ ಮತ್ತು ವೆಬ್ ವಿತರಣೆಗಾಗಿ ಆ ಚಿತ್ರಗಳನ್ನು ಸರಿಯಾಗಿ ತಯಾರಿಸಲು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಕೊನೆಯಲ್ಲಿ, ನೀವು ಸಾಕಷ್ಟು ದೊಡ್ಡ ಗಾತ್ರದ ಚಿತ್ರದ ಗಾತ್ರ ಮತ್ತು ಗುಣಮಟ್ಟ ಮತ್ತು ಡೌನ್ಲೋಡ್ ವೇಗಗಳಿಗಾಗಿ ಒಂದು ಸಮಂಜಸವಾದ ಫೈಲ್ ಗಾತ್ರದ ನಡುವಿನ ಸಂತೋಷದ ಮಾಧ್ಯಮವನ್ನು ಹುಡುಕಬೇಕಾಗಿದೆ.

ಸ್ಕೇಲಿಂಗ್ ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳನ್ನು ಬಳಸುವ ಸಾಮಾನ್ಯ ವಿಧಾನವೆಂದರೆ, ಆ ಪುಟವು ಪುಟದ ಪೂರ್ಣ ಹಿನ್ನಲೆ ತೆಗೆದುಕೊಳ್ಳಲು ನೀವು ಬಯಸಿದಾಗ, ಆ ಪುಟ ವ್ಯಾಪಕವಾಗಿದೆಯೇ ಮತ್ತು ಡೆಸ್ಕ್ಟಾಪ್ ಕಂಪ್ಯೂಟರ್ನಲ್ಲಿ ನೋಡಿದರೆ ಅಥವಾ ಚಿಕ್ಕದಾಗಿದೆ ಮತ್ತು ಕೈಯಲ್ಲಿ ಹಿಡಿಯುವ ಮೊಬೈಲ್, ಮೊಬೈಲ್ಗೆ ಕಳುಹಿಸಲಾಗುವುದು ಸಾಧನಗಳು.

ನಿಮ್ಮ ವೆಬ್ ಹೋಸ್ಟ್ಗೆ ನಿಮ್ಮ ಚಿತ್ರವನ್ನು ಅಪ್ಲೋಡ್ ಮಾಡಿ ಮತ್ತು ಹಿನ್ನೆಲೆ ಚಿತ್ರವನ್ನು ನಿಮ್ಮ ಸಿಎಸ್ಎಸ್ಗೆ ಸೇರಿಸಿ:

ಹಿನ್ನೆಲೆ-ಚಿತ್ರ: url (ಪಟಾಕಿ-ಓವರ್- wdw.jpg);
ಹಿನ್ನೆಲೆ-ಪುನರಾವರ್ತನೆ: ಇಲ್ಲ-ಪುನರಾವರ್ತನೆ;
ಹಿನ್ನೆಲೆ-ಸ್ಥಾನ: ಸೆಂಟರ್ ಸೆಂಟರ್;
ಹಿನ್ನೆಲೆ-ಲಗತ್ತಿಸುವಿಕೆ: ಸ್ಥಿರ;

ಮೊದಲು ಸಿಎಸ್ಎಸ್ ಪೂರ್ವಪ್ರತ್ಯಯವಾದ ಬ್ರೌಸರ್ ಅನ್ನು ಸೇರಿಸಿ:

-ವೆಬ್ಕಿಟ್-ಹಿನ್ನೆಲೆ-ಗಾತ್ರ: ಕವರ್;
-ಮೊಜ್-ಹಿನ್ನೆಲೆ ಗಾತ್ರ: ಕವರ್;
-ಒ-ಹಿನ್ನೆಲೆ-ಗಾತ್ರ: ಕವರ್;

ನಂತರ CSS ಆಸ್ತಿ ಸೇರಿಸಿ:

ಹಿನ್ನೆಲೆ-ಗಾತ್ರ: ಕವರ್;

ಆ ಸೂಟ್ ವಿವಿಧ ಸಾಧನಗಳನ್ನು ವಿವಿಧ ಚಿತ್ರಗಳು ಬಳಸಿ

ಒಂದು ಡೆಸ್ಕ್ಟಾಪ್ ಅಥವಾ ಲ್ಯಾಪ್ಟಾಪ್ ಅನುಭವಕ್ಕಾಗಿ ಪ್ರತಿಕ್ರಿಯಾಶೀಲರಾಗಿರುತ್ತಾರೆ ವಿನ್ಯಾಸ ಮುಖ್ಯವಾಗಿದ್ದರೂ, ವೆಬ್ ಅನ್ನು ಪ್ರವೇಶಿಸುವ ವಿವಿಧ ಸಾಧನಗಳು ಗಣನೀಯವಾಗಿ ಬೆಳೆದವು ಮತ್ತು ಹೆಚ್ಚಿನ ವೈವಿಧ್ಯಮಯ ಪರದೆಯ ಗಾತ್ರಗಳು ಇದರೊಂದಿಗೆ ಬರುತ್ತದೆ.

ಹಿಂದೆ ಹೇಳಿದಂತೆ, ಒಂದು ಸ್ಮಾರ್ಟ್ಫೋನ್ನಲ್ಲಿ ಬಹಳ ದೊಡ್ಡ ಪ್ರತಿಕ್ರಿಯಾಶೀಲರಾಗಿರುತ್ತಾರೆ ಹಿನ್ನೆಲೆ ಚಿತ್ರವನ್ನು ಲೋಡ್ ಮಾಡುವುದು, ಉದಾಹರಣೆಗೆ, ದಕ್ಷ ಅಥವಾ ಬ್ಯಾಂಡ್ವಿಡ್ತ್ ಪ್ರಜ್ಞೆಯ ವಿನ್ಯಾಸವಲ್ಲ.

ನೀವು ಪ್ರದರ್ಶಿಸುವ ಸಾಧನಗಳಿಗೆ ಸೂಕ್ತವಾದ ಚಿತ್ರಗಳನ್ನು ಪೂರೈಸಲು ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳನ್ನು ಹೇಗೆ ಬಳಸಬಹುದು ಎಂಬುದನ್ನು ತಿಳಿಯಿರಿ ಮತ್ತು ನಿಮ್ಮ ವೆಬ್ಸೈಟ್ನ ಹೊಂದಾಣಿಕೆಯನ್ನು ಮೊಬೈಲ್ ಸಾಧನಗಳೊಂದಿಗೆ ಇನ್ನಷ್ಟು ಸುಧಾರಿಸಿಕೊಳ್ಳಿ.

ಜೆನ್ಫೈರ್ ಕ್ರಿನ್ನಿನ ಮೂಲ ಲೇಖನ. ಜೆರೆಮಿ ಗಿರಾರ್ಡ್ ಸಂಪಾದಿಸಿದ್ದು 9/12/17