ಸಿಎಸ್ಎಸ್ನೊಂದಿಗೆ ತಂತ್ರವನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಿ
ನೀವು ವೆಬ್ಸೈಟ್ ಅನ್ನು ವಿನ್ಯಾಸ ಮಾಡುತ್ತಿದ್ದರೆ, ವೆಬ್ ಪುಟದಲ್ಲಿ ಸ್ಥಿರ ಹಿನ್ನೆಲೆ ಇಮೇಜ್ ಅಥವಾ ವಾಟರ್ಮಾರ್ಕ್ ಅನ್ನು ಹೇಗೆ ರಚಿಸುವುದು ಎಂದು ತಿಳಿದುಕೊಳ್ಳಲು ನೀವು ಆಸಕ್ತಿ ಹೊಂದಿರಬಹುದು. ಇದು ಸ್ವಲ್ಪ ಸಮಯದವರೆಗೆ ಆನ್ಲೈನ್ನಲ್ಲಿ ಜನಪ್ರಿಯವಾಗಿರುವ ಸಾಮಾನ್ಯ ವಿನ್ಯಾಸದ ಚಿಕಿತ್ಸೆಯಾಗಿದೆ. ತಂತ್ರಗಳ ನಿಮ್ಮ ವೆಬ್ ವಿನ್ಯಾಸ ಚೀಲದಲ್ಲಿ ಹೊಂದಲು ಇದು ಒಂದು ಉತ್ತಮ ಪರಿಣಾಮವಾಗಿದೆ.
ನೀವು ಇದನ್ನು ಮೊದಲು ಮಾಡದಿದ್ದರೆ ಅಥವಾ ಹಿಂದೆ ಅದೃಷ್ಟವಿಲ್ಲದೆ ಪ್ರಯತ್ನಿಸಿದರೆ, ಈ ಪ್ರಕ್ರಿಯೆಯು ಬೆದರಿಸುವಂತೆ ತೋರುತ್ತದೆ, ಆದರೆ ಇದು ನಿಜವಾಗಿಯೂ ಬಹಳ ಕಷ್ಟವಲ್ಲ. ಈ ಸಂಕ್ಷಿಪ್ತ ಟ್ಯುಟೋರಿಯಲ್ನೊಂದಿಗೆ, ನೀವು CSS ಅನ್ನು ಬಳಸಿಕೊಂಡು ನಿಮಿಷಗಳ ವಿಷಯದಲ್ಲಿ ತಂತ್ರವನ್ನು ಸದುಪಯೋಗಪಡಿಸಿಕೊಳ್ಳಬೇಕಾದ ಮಾಹಿತಿಯನ್ನು ಪಡೆಯುತ್ತೀರಿ.
ಶುರುವಾಗುತ್ತಿದೆ
ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳನ್ನು ಅಥವಾ ನೀರುಗುರುತುಗಳನ್ನು (ನಿಜವಾಗಿಯೂ ಕೇವಲ ಬಹಳ ಹಿನ್ನಲೆ ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳು) ಮುದ್ರಿತ ವಿನ್ಯಾಸದಲ್ಲಿ ಇತಿಹಾಸವನ್ನು ಹೊಂದಿವೆ. ದಸ್ತಾವೇಜುಗಳು ಅವುಗಳ ಮೇಲೆ ನೀರುಗುರುತುಗಳನ್ನು ದೀರ್ಘಕಾಲದಿಂದ ನಕಲು ಮಾಡದಂತೆ ತಡೆಗಟ್ಟುತ್ತದೆ. ಹೆಚ್ಚುವರಿಯಾಗಿ, ಅನೇಕ ಫ್ಲೈಯರ್ಸ್ ಮತ್ತು ಕೈಪಿಡಿಗಳು ಮುದ್ರಿತ ತುಣುಕಿನ ವಿನ್ಯಾಸದ ಭಾಗವಾಗಿ ದೊಡ್ಡ ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳನ್ನು ಬಳಸುತ್ತವೆ. ವೆಬ್ ವಿನ್ಯಾಸ ಮುದ್ರಣದಿಂದ ದೀರ್ಘಕಾಲ ಶೈಲಿಗಳನ್ನು ಪಡೆದುಕೊಂಡಿತ್ತು ಮತ್ತು ಹಿನ್ನಲೆ ಚಿತ್ರಗಳೆಂದರೆ ಈ ಎರವಲು ಪಡೆದ ಶೈಲಿಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ.
ಈ ದೊಡ್ಡ ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳನ್ನು ಕೆಳಗಿನ ಮೂರು ಸಿಎಸ್ಎಸ್ ಶೈಲಿ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಿಕೊಂಡು ರಚಿಸಲು ಸುಲಭ:
- ಹಿನ್ನೆಲೆ-ಚಿತ್ರ
- ಹಿನ್ನೆಲೆ-ಪುನರಾವರ್ತನೆ
- ಹಿನ್ನೆಲೆ-ಲಗತ್ತು
- ಹಿನ್ನೆಲೆ-ಗಾತ್ರ
ಹಿನ್ನೆಲೆ ಚಿತ್ರ
ನಿಮ್ಮ ವಾಟರ್ಮಾರ್ಕ್ ಆಗಿ ಬಳಸಲಾಗುವ ಚಿತ್ರವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಹಿನ್ನೆಲೆ-ಇಮೇಜ್ ಅನ್ನು ನೀವು ಬಳಸುತ್ತೀರಿ. ಈ ಶೈಲಿಯು ನಿಮ್ಮ ಸೈಟ್ನಲ್ಲಿ ಹೊಂದಿರುವ ಇಮೇಜ್ ಅನ್ನು ಲೋಡ್ ಮಾಡಲು ಫೈಲ್ ಪಥವನ್ನು ಬಳಸುತ್ತದೆ, ಇದು ಬಹುಶಃ "ಇಮೇಜ್ಗಳು" ಎಂಬ ಡೈರೆಕ್ಟರಿಯಲ್ಲಿ ಕಂಡುಬರುತ್ತದೆ.
background-image: url (/images/page-background.jpg);
ಚಿತ್ರವು ಸಾಮಾನ್ಯ ಚಿತ್ರಕ್ಕಿಂತಲೂ ಹಗುರವಾದ ಅಥವಾ ಹೆಚ್ಚು ಪಾರದರ್ಶಕವಾಗಿರುತ್ತದೆ ಎಂಬುದು ಮುಖ್ಯವಾಗಿದೆ. ಇದು "ನೀರುಗುರುತು" ನೋಟವನ್ನು ರಚಿಸುತ್ತದೆ, ಅದರಲ್ಲಿ ಅರೆ-ಪಾರದರ್ಶಕ ಚಿತ್ರವು ಪಠ್ಯ, ಗ್ರಾಫಿಕ್ಸ್ ಮತ್ತು ವೆಬ್ ಪುಟದ ಇತರ ಮುಖ್ಯ ಅಂಶಗಳ ಹಿಂದೆ ಇರುತ್ತದೆ. ಈ ಹಂತವಿಲ್ಲದೆ, ಹಿನ್ನೆಲೆ ಚಿತ್ರವು ನಿಮ್ಮ ಪುಟದ ಮಾಹಿತಿಯೊಂದಿಗೆ ಸ್ಪರ್ಧಿಸುತ್ತದೆ ಮತ್ತು ಅದನ್ನು ಓದಲು ಕಷ್ಟವಾಗುತ್ತದೆ.
ಅಡೋಬ್ ಫೋಟೊಶಾಪ್ನಂತಹ ಯಾವುದೇ ಎಡಿಟಿಂಗ್ ಪ್ರೋಗ್ರಾಂನಲ್ಲಿ ಹಿನ್ನೆಲೆ ಚಿತ್ರವನ್ನು ನೀವು ಹೊಂದಿಸಬಹುದು.
ಹಿನ್ನೆಲೆ-ಪುನರಾವರ್ತಿಸಿ
ಹಿನ್ನೆಲೆ-ಪುನರಾವರ್ತನೆಯ ಆಸ್ತಿ ಮುಂದಿನದು ಬರುತ್ತದೆ. ನಿಮ್ಮ ಇಮೇಜ್ ದೊಡ್ಡ ನೀರುಗುರುತು ಶೈಲಿಯ ಗ್ರಾಫಿಕ್ ಆಗಿರಬೇಕು ಎಂದು ನೀವು ಬಯಸಿದರೆ, ಆ ಚಿತ್ರವನ್ನು ಒಮ್ಮೆ ಮಾತ್ರ ಪ್ರದರ್ಶಿಸಲು ನೀವು ಈ ಆಸ್ತಿಯನ್ನು ಬಳಸುತ್ತೀರಿ.
ಹಿನ್ನೆಲೆ-ಪುನರಾವರ್ತನೆ: ಇಲ್ಲ-ಪುನರಾವರ್ತನೆ;
"ನೋ-ಪುನರಾವರ್ತನೆ" ಆಸ್ತಿ ಇಲ್ಲದೆ, ಡೀಫಾಲ್ಟ್ ಚಿತ್ರವು ಮತ್ತೆ ಪುಟದ ಮೇಲೆ ಪುನರಾವರ್ತಿಸುತ್ತದೆ ಎಂದು. ಇದು ಹೆಚ್ಚಿನ ಆಧುನಿಕ ವೆಬ್ ಪುಟ ವಿನ್ಯಾಸಗಳಲ್ಲಿ ಅನಪೇಕ್ಷಣೀಯವಾಗಿದೆ, ಆದ್ದರಿಂದ ಈ ಶೈಲಿಯನ್ನು ನಿಮ್ಮ ಸಿಎಸ್ಎಸ್ ನಲ್ಲಿ ಅಗತ್ಯವೆಂದು ಪರಿಗಣಿಸಬೇಕು.
ಹಿನ್ನೆಲೆ-ಲಗತ್ತು
ಹಿನ್ನೆಲೆ-ಲಗತ್ತು ಅನೇಕ ವೆಬ್ ವಿನ್ಯಾಸಕರು ಮರೆತುಹೋಗುವ ಆಸ್ತಿಯಾಗಿದೆ. ನೀವು "ಸ್ಥಿರ" ಆಸ್ತಿಯನ್ನು ಬಳಸುವಾಗ ಅದನ್ನು ಬಳಸಿಕೊಂಡು ನಿಮ್ಮ ಹಿನ್ನೆಲೆ ಚಿತ್ರವನ್ನು ಸ್ಥಳದಲ್ಲಿ ಸ್ಥಿರವಾಗಿರಿಸಿಕೊಳ್ಳುತ್ತದೆ. ಆ ಚಿತ್ರವನ್ನು ವಾಟರ್ಮಾರ್ಕ್ನಲ್ಲಿ ತಿರುಗಿಸುತ್ತದೆ ಅದು ಪುಟದಲ್ಲಿ ಸ್ಥಿರವಾಗಿದೆ.
ಈ ಆಸ್ತಿಯ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯ "ಸ್ಕ್ರಾಲ್" ಆಗಿದೆ. ನೀವು ಹಿನ್ನೆಲೆ-ಲಗತ್ತು ಮೌಲ್ಯವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸದಿದ್ದರೆ, ಹಿನ್ನೆಲೆ ಉಳಿದ ಪುಟದೊಂದಿಗೆ ಸ್ಕ್ರಾಲ್ ಆಗುತ್ತದೆ.
ಹಿನ್ನೆಲೆ-ಲಗತ್ತಿಸುವಿಕೆ: ಸ್ಥಿರ;
ಹಿನ್ನೆಲೆ ಗಾತ್ರ
ಹಿನ್ನೆಲೆ ಗಾತ್ರದ ಹೊಸ ಸಿಎಸ್ಎಸ್ ಗುಣಲಕ್ಷಣವಾಗಿದೆ. ಇದು ನೋಡುವ ಪೋರ್ಟ್ ಅನ್ನು ಆಧರಿಸಿ ಹಿನ್ನೆಲೆಯ ಗಾತ್ರವನ್ನು ಹೊಂದಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಪ್ರತಿಕ್ರಿಯಾಶೀಲರಾಗಿರುತ್ತಾರೆ ಸಾಧನಗಳಿಗೆ ಇದು ವಿಭಿನ್ನ ಸಾಧನಗಳಲ್ಲಿ ವಿವಿಧ ಗಾತ್ರಗಳಲ್ಲಿ ಪ್ರದರ್ಶಿಸುತ್ತದೆ.
ಹಿನ್ನೆಲೆ-ಗಾತ್ರ: ಕವರ್;
ಈ ಆಸ್ತಿಗಾಗಿ ನೀವು ಬಳಸಬಹುದಾದ ಎರಡು ಉಪಯುಕ್ತ ಮೌಲ್ಯಗಳು:
- ಕವರ್ - ಹಿನ್ನೆಲೆಯನ್ನು ಅಳೆಯುತ್ತದೆ ಆದ್ದರಿಂದ ಪೂರ್ಣ ಅಗಲ ಅಥವಾ ಪೂರ್ಣ ಎತ್ತರವನ್ನು ತೋರಿಸಲಾಗುತ್ತದೆ. ಇದರರ್ಥ ಚಿತ್ರದ ಕೆಲವು ಭಾಗಗಳು ಪರದೆಯ ಮೇಲೆ ಕಾಣಿಸುವುದಿಲ್ಲ ಆದರೆ ಇಡೀ ಪ್ರದೇಶವನ್ನು ಮುಚ್ಚಲಾಗುತ್ತದೆ.
- ಒಳಗೊಂಡಿದೆ - ಚಿತ್ರದ ಗಾತ್ರವನ್ನು ಹೀಗಾಗಿ ಇಡೀ ಅಗಲ ಮತ್ತು ಎತ್ತರವನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಿದ ಪ್ರದೇಶದಲ್ಲಿ ತೋರಿಸಲಾಗಿದೆ. ಚಿತ್ರ ಕತ್ತರಿಸಲಾಗುವುದಿಲ್ಲ, ಆದರೆ ತೊಂದರೆಯು ಪ್ರದೇಶದ ಭಾಗಗಳನ್ನು ಚಿತ್ರದಿಂದ ಮುಚ್ಚಿರುವುದಿಲ್ಲ.
ನಿಮ್ಮ ಪುಟಕ್ಕೆ ಸಿಎಸ್ಎಸ್ ಸೇರಿಸಲಾಗುತ್ತಿದೆ
ಮೇಲಿನ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಮತ್ತು ಅವುಗಳ ಮೌಲ್ಯಗಳನ್ನು ನೀವು ಅರ್ಥಮಾಡಿಕೊಂಡ ನಂತರ, ನಿಮ್ಮ ವೆಬ್ಸೈಟ್ಗೆ ಈ ಶೈಲಿಗಳನ್ನು ಸೇರಿಸಬಹುದು.
ನೀವು ಒಂದು ಪುಟದ ಸೈಟ್ ಅನ್ನು ಮಾಡುತ್ತಿದ್ದರೆ ನಿಮ್ಮ ವೆಬ್ ಪುಟದ HEAD ಗೆ ಕೆಳಗಿನವುಗಳನ್ನು ಸೇರಿಸಿ. ನೀವು ಒಂದು ಬಹು-ಪುಟದ ಸೈಟ್ ಅನ್ನು ನಿರ್ಮಿಸುತ್ತಿದ್ದರೆ ಮತ್ತು ಬಾಹ್ಯ ಹಾಳೆಯ ಶಕ್ತಿಯ ಲಾಭವನ್ನು ಪಡೆಯಲು ಬಯಸಿದರೆ ಅದನ್ನು ಬಾಹ್ಯ ಸ್ಟೈಲ್ ಶೀಟ್ನ ಸಿಎಸ್ಎಸ್ ಶೈಲಿಗಳಿಗೆ ಸೇರಿಸಿ.