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

ಉದಾಹರಣೆ 1. ಮೂರು ಹಿನ್ನೆಲೆಗಳು

ಮೇಲಿನ ಉದಾಹರಣೆಯಲ್ಲಿರುವಂತೆ ಹಿನ್ನೆಲೆ-ಗಾತ್ರದಂತಹ ಹಿನ್ನೆಲೆಗಾಗಿ ನೀವು ಕೆಲವು ಶೈಲಿಯ ಆಸ್ತಿಯನ್ನು ಪ್ರತ್ಯೇಕವಾಗಿ ಹೊಂದಿಸಬೇಕಾದರೆ, ನಂತರ ಪ್ರತಿ ಹಿನ್ನೆಲೆಯ ನಿಯತಾಂಕಗಳನ್ನು ಅಲ್ಪವಿರಾಮದಿಂದ ಪ್ರತ್ಯೇಕಿಸಿ ಪಟ್ಟಿಮಾಡಲಾಗುತ್ತದೆ. ಈ ಉದಾಹರಣೆಯ ಫಲಿತಾಂಶವನ್ನು ಅಂಜೂರದಲ್ಲಿ ತೋರಿಸಲಾಗಿದೆ. 1.

ಅಕ್ಕಿ. 1. ಮೂರು ಚಿತ್ರಗಳೊಂದಿಗೆ ಹಿನ್ನೆಲೆ

ಉದಾಹರಣೆ 2 ರಲ್ಲಿ ತೋರಿಸಿರುವಂತೆ ವೈಯಕ್ತಿಕ ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳು ಅವುಗಳ ಸ್ಥಾನವನ್ನು ಬದಲಾಯಿಸಲು ಮತ್ತು ಅವುಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

ಉದಾಹರಣೆ 2. ಅನಿಮೇಟೆಡ್ ಹಿನ್ನೆಲೆ

ಚೌಕಟ್ಟಿನೊಂದಿಗೆ ಬ್ಲಾಕ್ ಅನ್ನು ರಚಿಸಲು ಒಂದು ಚಿತ್ರವನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂದು ಈಗ ಪರಿಗಣಿಸೋಣ (ಚಿತ್ರ 2). ಬ್ಲಾಕ್ನ ಅಗಲವನ್ನು ನಿಗದಿಪಡಿಸಲಾಗಿದೆ ಮತ್ತು ಬ್ಲಾಕ್ನ ವಿಷಯಗಳ ಪರಿಮಾಣವನ್ನು ಅವಲಂಬಿಸಿ ಎತ್ತರವು ಬದಲಾಗುತ್ತದೆ.

ಅಕ್ಕಿ. 2. ಕೈಯಿಂದ ಚಿತ್ರಿಸಿದ ಫ್ರೇಮ್

ಕತ್ತರಿಸಬೇಕಾದ ಮೇಲಿನ ಮತ್ತು ಕೆಳಗಿನ ಭಾಗಗಳನ್ನು ಅಂಕಿ ಸ್ಪಷ್ಟವಾಗಿ ತೋರಿಸುತ್ತದೆ ಗ್ರಾಫಿಕ್ ಸಂಪಾದಕಮತ್ತು ಅದನ್ನು ಅಡ್ಡಲಾಗಿ ಇರಿಸಿ. ಮಧ್ಯದ ಭಾಗವನ್ನು ಆಯ್ಕೆಮಾಡಲಾಗಿದೆ ಆದ್ದರಿಂದ ಅದು ಸ್ತರಗಳಿಲ್ಲದೆ ಲಂಬವಾಗಿ ಪುನರಾವರ್ತನೆಯಾಗುತ್ತದೆ. ಚಿತ್ರವು ಉಚ್ಚಾರಣಾ ಪುನರಾವರ್ತಿತ ಮಾದರಿಯನ್ನು ಹೊಂದಿದೆ, ಆದ್ದರಿಂದ ಅದನ್ನು ಹೈಲೈಟ್ ಮಾಡಲು ಯಾವುದೇ ತೊಂದರೆ ಇರಬಾರದು. ಫಲಿತಾಂಶವು ತಯಾರಾದ ಚಿತ್ರವಾಗಿರುತ್ತದೆ (ಚಿತ್ರ 3). ಚೆಕ್ಕರ್ ಕ್ಷೇತ್ರವು ಪಾರದರ್ಶಕತೆಯನ್ನು ಸೂಚಿಸುತ್ತದೆ; ಇದು ಚಿತ್ರಗಳ ಜೊತೆಗೆ ಬಣ್ಣದ ಹಿನ್ನೆಲೆಯನ್ನು ಹೊಂದಿಸಲು ಮತ್ತು ಶೈಲಿಗಳ ಮೂಲಕ ಸುಲಭವಾಗಿ ಬದಲಾಯಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

ಅಕ್ಕಿ. 3. ಹಿನ್ನೆಲೆಗಾಗಿ ಚಿತ್ರ ಸಿದ್ಧಪಡಿಸಲಾಗಿದೆ

ಹಿನ್ನೆಲೆ ಆಸ್ತಿಯಿಂದ ಹಿನ್ನೆಲೆಯನ್ನು ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ, ಇದು ನಿರ್ದೇಶಾಂಕಗಳನ್ನು ಸಹ ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ ಬಯಸಿದ ತುಣುಕು. ಪ್ರತಿ ಹಿನ್ನೆಲೆಯ ನಿಯತಾಂಕಗಳನ್ನು ಅಲ್ಪವಿರಾಮದಿಂದ ಮತ್ತು ಇನ್ ಮೂಲಕ ಪ್ರತ್ಯೇಕಿಸಿ ಪಟ್ಟಿಮಾಡಲಾಗಿದೆ ಈ ಸಂದರ್ಭದಲ್ಲಿಅವರ ಆದೇಶವು ಮುಖ್ಯವಾಗಿದೆ. ಬ್ಲಾಕ್‌ನ ಮೇಲ್ಭಾಗ ಮತ್ತು ಕೆಳಭಾಗವು ಅತಿಕ್ರಮಿಸಬಾರದು ಎಂದು ನಾವು ಬಯಸುತ್ತೇವೆ, ಆದ್ದರಿಂದ ನಾವು ಅವುಗಳನ್ನು ಮೊದಲು ಇಡುತ್ತೇವೆ (ಉದಾಹರಣೆ 3). ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ಕೊನೆಯದಾಗಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಲಾಗಿದೆ.

ಉದಾಹರಣೆ 3. ಹಲವಾರು ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳು

ಮೊದಲ ಹಿನ್ನೆಲೆಯು ಬ್ಲಾಕ್ನ ಮೇಲಿನ ಗಡಿಯನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ, ಎರಡನೆಯ ಹಿನ್ನೆಲೆ - ಕೆಳಭಾಗ, ಮತ್ತು ಮೂರನೇ - ಲಂಬ ಗಡಿಗಳು. ಕೊನೆಯದು ಬ್ಲಾಕ್ನ ಪಾರದರ್ಶಕ ಕೇಂದ್ರ ಭಾಗದಲ್ಲಿ ಗೋಚರಿಸುವ ಬಣ್ಣವಾಗಿದೆ (ಚಿತ್ರ 4).

CSS 2.1 ಹುಸಿ-ಅಂಶಗಳನ್ನು ಬಳಸುವುದರಿಂದ ಹಿನ್ನೆಲೆಗಾಗಿ 3 ಹಂತಗಳನ್ನು ಬಳಸಲು ಸಾಧ್ಯವಾಗಿಸುತ್ತದೆ, ಜೊತೆಗೆ 2 ಚಿತ್ರಗಳು ಸ್ಥಿರ ಗಾತ್ರಗಳುಮತ್ತು ಒಂದಕ್ಕೆ ಬಹು ಸಂಕೀರ್ಣ ಸ್ಟ್ರೋಕ್‌ಗಳು HTML ಅಂಶ. ಈ ವಿಧಾನಸ್ಥಾನೀಕರಣದೊಂದಿಗೆ CSS 2.1 ಹುಸಿ ಅಂಶಗಳನ್ನು ಬೆಂಬಲಿಸುವ ಎಲ್ಲಾ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ವೆಬ್ ಪುಟಗಳ ವಿನ್ಯಾಸ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಗಮನಾರ್ಹವಾಗಿ ವಿಸ್ತರಿಸುತ್ತದೆ. ಯಾವುದೇ CSS3 ಬೆಂಬಲ ಅಗತ್ಯವಿಲ್ಲ.

ಮೂಲಭೂತವಾಗಿ, CSS ಹುಸಿ-ಅಂಶಗಳೊಂದಿಗೆ (:ಮೊದಲು ಮತ್ತು :ನಂತರ) ರಚಿಸುವುದು ಮತ್ತು ಕೆಲಸ ಮಾಡುವುದು ಗುರಿ ಅಂಶದೊಳಗೆ ನೀವು ನೆಸ್ಟೆಡ್ HTML ಅಂಶಗಳೊಂದಿಗೆ ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತೀರಿ ಎಂಬುದರಂತೆಯೇ ಇರುತ್ತದೆ. ಆದರೆ ಒಂದು ಗಮನಾರ್ಹ ಪ್ರಯೋಜನದೊಂದಿಗೆ - ನೆಸ್ಟೆಡ್ HTML ಅಂಶಗಳನ್ನು ಬಳಸದೆ ಎಲ್ಲವನ್ನೂ ಶಬ್ದಾರ್ಥದ ಹೊರಗೆ ಮಾಡಲಾಗುತ್ತದೆ.

ಬಹು ಹಿನ್ನೆಲೆಗಳು ಮತ್ತು/ಅಥವಾ ಸ್ಟ್ರೋಕ್‌ಗಳನ್ನು ರಚಿಸಲು, ಹುಸಿ-ಅಂಶಗಳನ್ನು ವಿಷಯದ ಹಿಂದೆ ಸರಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಲಗತ್ತಿಸಲಾಗಿದೆ ಸರಿಯಾದ ಪಾಯಿಂಟ್ಸಂಪೂರ್ಣ ಸ್ಥಾನೀಕರಣವನ್ನು ಬಳಸಿಕೊಂಡು HTML ಅಂಶ.

ಹುಸಿ ಅಂಶವು ಯಾವುದೇ ನೈಜ ವಿಷಯವನ್ನು ಹೊಂದಿಲ್ಲ ಮತ್ತು ಸಂಪೂರ್ಣವಾಗಿ ಸ್ಥಾನದಲ್ಲಿದೆ. ಈ ರೀತಿಯಾಗಿ ವಿಷಯದ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರದೆ "ಪೋಷಕ" ಅಂಶದ ಯಾವುದೇ ಪ್ರದೇಶದ ಮೇಲೆ ಅದನ್ನು ವಿಸ್ತರಿಸಬಹುದು. ಇದನ್ನು ಮಾಡಲು, ನೀವು ಮೇಲಿನ , ಬಲ , ಕೆಳಗೆ , ಎಡ , ಅಗಲ ಮತ್ತು ಎತ್ತರ ಗುಣಲಕ್ಷಣಗಳ ಸಂಯೋಜನೆಯನ್ನು ಬಳಸಬಹುದು.

ನೀವು ಯಾವ ಪರಿಣಾಮಗಳನ್ನು ಪಡೆಯಬಹುದು?

ಕೇವಲ ಒಂದು ಅಂಶವನ್ನು ಬಳಸಿಕೊಂಡು ನೀವು ಭ್ರಂಶ, ಬಹು ಹಿನ್ನೆಲೆಗಳು (ಬಣ್ಣಗಳು ಮತ್ತು ಚಿತ್ರಗಳು ಎರಡನ್ನೂ), ಕತ್ತರಿಸಿದ ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳು, ಇಮೇಜ್ ಬದಲಿ, ಬಾಹ್ಯರೇಖೆಯಂತೆ ಚಿತ್ರಗಳೊಂದಿಗೆ ವಿಸ್ತರಿಸಬಹುದಾದ ಅಂಶಗಳು, ಹೊಂದಿಕೊಳ್ಳುವ ಕೃತಕ ಕಾಲಮ್‌ಗಳು, ಅಂಶದ ಗಡಿಗಳನ್ನು ಮೀರಿ ವಿಸ್ತರಿಸುವ ಚಿತ್ರಗಳು, ಬಹು ಹೊಡೆತಗಳುಮತ್ತು ಚಿತ್ರ ಟ್ಯಾಗ್‌ಗಳು ಮತ್ತು/ಅಥವಾ ಹೆಚ್ಚುವರಿ HTML ಮಾರ್ಕ್‌ಅಪ್ ಅನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಬಳಸುವ ಇತರ ಜನಪ್ರಿಯ ಪರಿಣಾಮಗಳು.

ಡೆಮೊ ಪುಟಗಳಲ್ಲಿ ನೀವು ಈ ತಂತ್ರವನ್ನು ಬಳಸಿಕೊಂಡು ಹಲವಾರು ಜನಪ್ರಿಯ ವೆಬ್ ಪುಟ ವಿನ್ಯಾಸ ಪರಿಣಾಮಗಳ ಅನುಷ್ಠಾನವನ್ನು ನೋಡಬಹುದು.

ಹೆಚ್ಚುವರಿಯಾಗಿ, ನೀವು ಸ್ಟೈಲಿಂಗ್ ಬದಲಾವಣೆಗಳನ್ನು ಬಳಸಬಹುದು: ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಪರಿಣಾಮಗಳನ್ನು ಸಾಧಿಸಲು ಹೂವರ್ ಮಾಡಿ.

ಮಾದರಿ ಕೋಡ್: ಬಹು ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳು

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

ಅಂಶವು ತನ್ನದೇ ಆದ ಹಿನ್ನೆಲೆ ಮತ್ತು ಅಗತ್ಯವಿರುವ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಪಡೆಯುತ್ತದೆ. ಒಂದು ಅಂಶದ ಸಾಪೇಕ್ಷ ಸ್ಥಾನೀಕರಣವು ಹುಸಿ ಅಂಶಗಳ ಸಂಪೂರ್ಣ ಸ್ಥಾನಕ್ಕಾಗಿ ಒಂದು ಉಲ್ಲೇಖ ಬಿಂದುವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಧನಾತ್ಮಕ z-ಸೂಚ್ಯಂಕ ಮೌಲ್ಯವು z ಅಕ್ಷದ ಉದ್ದಕ್ಕೂ ಹುಸಿ-ಅಂಶಗಳ ಸ್ಥಾನವನ್ನು ಸರಿಹೊಂದಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

#silverback (ಸ್ಥಾನ:ಸಂಬಂಧಿ; z-ಸೂಚ್ಯಂಕ:1; ನಿಮಿಷ-ಅಗಲ:200px; ನಿಮಿಷ-ಎತ್ತರ:200px; ಪ್ಯಾಡಿಂಗ್:120px 200px 50px; ಹಿನ್ನೆಲೆ:#d3ff99 url(vines-back.png) -10% 0 ಪುನರಾವರ್ತನೆ-x ;)

ಎರಡೂ ಹುಸಿ-ಅಂಶಗಳನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಇರಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಅಂಶದ ಬದಿಗಳಲ್ಲಿ ಇರಿಸಲಾಗುತ್ತದೆ. ಅರ್ಥ z-ಸೂಚ್ಯಂಕ ಸಮಾನವಾಗಿರುತ್ತದೆ-1 ಪದರದ ಹಿಂದೆ ಹುಸಿ-ಅಂಶವನ್ನು ಇರಿಸುತ್ತದೆ ವಿಷಯ. ಈ ರೀತಿಯಾಗಿ, ಹುಸಿ-ಅಂಶಗಳನ್ನು ಅಂಶದ ಹಿನ್ನೆಲೆ ಮತ್ತು ಬಾಹ್ಯರೇಖೆಯ ಮೇಲೆ ಇರಿಸಲಾಗುತ್ತದೆ, ಆದರೆ ಎಲ್ಲಾ ವಿಷಯವು ಆಯ್ಕೆ ಮಾಡಬಹುದಾದ ಮತ್ತು ಮೌಸ್ ಕ್ಲಿಕ್‌ಗಳಿಗೆ ಸೂಕ್ಷ್ಮವಾಗಿರುತ್ತದೆ.

#ಬೆಳ್ಳಿಬ್ಯಾಕ್:ಮೊದಲು, #ಬೆಳ್ಳಿಬ್ಯಾಕ್:ನಂತರ (ಸ್ಥಾನ:ಸಂಪೂರ್ಣ; z-ಸೂಚ್ಯಂಕ:-1; ಮೇಲ್ಭಾಗ:0; ಎಡ:0; ಬಲ:0; ಕೆಳಗೆ:0; ಪ್ಯಾಡಿಂಗ್-ಟಾಪ್:100px; )

ಪ್ರತಿಯೊಂದು ಹುಸಿ-ಅಂಶವು ಪುನರಾವರ್ತಿತ ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳನ್ನು ಹೊಂದಿರುತ್ತದೆ. ಭ್ರಂಶ ಪರಿಣಾಮವನ್ನು ಪುನರುತ್ಪಾದಿಸಲು, ನಿಮಗೆ ಬೇರೇನೂ ಅಗತ್ಯವಿಲ್ಲ.

ವಿಷಯದ ಗುಣಲಕ್ಷಣವು ಚಿತ್ರವನ್ನು ರಚಿಸಿದ ವಿಷಯವಾಗಿ ಸೇರಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಎರಡು ಹುಸಿ ಅಂಶಗಳನ್ನು ಹೊಂದಿರುವ ನೀವು ಅಂಶಕ್ಕೆ 2 ಹೆಚ್ಚುವರಿ ಚಿತ್ರಗಳನ್ನು ಸೇರಿಸಲು ಅನುಮತಿಸುತ್ತದೆ. ಪಠ್ಯ-ಅಲೈನ್ ಮತ್ತು ಪ್ಯಾಡಿಂಗ್‌ನಂತಹ ಇತರ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಅವುಗಳನ್ನು ಹುಸಿ-ಅಂಶಗಳಲ್ಲಿ ಸ್ಥೂಲವಾಗಿ ಇರಿಸಬಹುದು.

#silverback:ಮೊದಲು (ವಿಷಯ:url(ಗೊರಿಲ್ಲಾ-1.png); ಪ್ಯಾಡಿಂಗ್-ಎಡ:3%; ಪಠ್ಯ-ಹೊಂದಾಣಿಕೆ:ಎಡ; ಹಿನ್ನೆಲೆ:ಪಾರದರ್ಶಕ url(vines-mid.png) 300% 0 ಪುನರಾವರ್ತಿಸಿ-x; ) #silverback :ನಂತರ (ವಿಷಯ:url(ಗೊರಿಲ್ಲಾ-2.png); ಪ್ಯಾಡಿಂಗ್-ಬಲ:3%; ಪಠ್ಯ-ಹೊಂದಾಣಿಕೆ:ಬಲ; ಹಿನ್ನೆಲೆ:ಪಾರದರ್ಶಕ url(ವೈನ್ಸ್-ಫ್ರಂಟ್.ಪಿಎನ್‌ಜಿ) 70% 0 ಪುನರಾವರ್ತನೆ-x; )

ಉದಾಹರಣೆ ಕೋಡ್: ಹೊಂದಿಕೊಳ್ಳುವ ಕೃತಕ ಕಾಲಮ್‌ಗಳು

ವಿವರಿಸಿದ ತಂತ್ರದ ಮತ್ತೊಂದು ಅಪ್ಲಿಕೇಶನ್ ಹೊಂದಿಕೊಳ್ಳುವ ಕಾಲಮ್ಗಳ ರಚನೆಯಾಗಿದೆ ಸಮಾನ ಎತ್ತರಚಿತ್ರಗಳು ಅಥವಾ ಹೆಚ್ಚುವರಿ ಸಂಬಂಧಿತ ಅಂಶಗಳ ಬಳಕೆಯಿಲ್ಲದೆ.

HTML ಮಾರ್ಕ್ಅಪ್ ತುಂಬಾ ಸರಳವಾಗಿದೆ. ನಾವು ಎಲ್ಲರಿಗೂ ತರಗತಿಗಳನ್ನು ಬಳಸುತ್ತೇವೆ ಡಿವಿ ಅಂಶಬದಲಿಗೆ CSS ಆಯ್ಕೆದಾರರು 2.1, ಇದು IE6 ನಿಂದ ಬೆಂಬಲಿತವಾಗಿಲ್ಲ. IE6 ಅನ್ನು ಬೆಂಬಲಿಸುವ ಅಗತ್ಯವಿಲ್ಲದಿದ್ದರೆ, ಸೆಲೆಕ್ಟರ್‌ಗಳನ್ನು ಬಳಸಬಹುದು.

ಕಂಟೇನರ್ ಶೇಕಡಾವಾರು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಅಗಲವನ್ನು ಹೊಂದಿದೆ, ಸಂಬಂಧಿತ ಸ್ಥಾನೀಕರಣಮತ್ತು ಧನಾತ್ಮಕ z-ಸೂಚ್ಯಂಕ ಆಸ್ತಿ ಮೌಲ್ಯ. ಓವರ್‌ಫ್ಲೋ:ಹಿಡನ್ ಅನ್ನು ಬಳಸುವುದರಿಂದ ಒಂದು ಅಂಶವು ತನ್ನ ತೇಲುವ ಮಕ್ಕಳ ವಿಷಯವನ್ನು ಸುತ್ತಲು ಅನುಮತಿಸುತ್ತದೆ ಮತ್ತು ಹುಸಿ-ಅಂಶಗಳನ್ನು ಮೀರಿಸುತ್ತದೆ. ಹಿನ್ನೆಲೆ ಬಣ್ಣವು ಕಾಲಮ್‌ಗಳಲ್ಲಿ ಒಂದಕ್ಕೆ ಬಣ್ಣವನ್ನು ಒದಗಿಸುತ್ತದೆ.

#ಫಾಕ್ಸ್ (ಸ್ಥಾನ: ಸಂಬಂಧಿ; z-ಸೂಚ್ಯಂಕ: 1; ಅಗಲ: 80%; ಅಂಚು: 0 ಸ್ವಯಂ; ಓವರ್‌ಫ್ಲೋ: ಮರೆಮಾಡಲಾಗಿದೆ; ಹಿನ್ನೆಲೆ:#ffaf00; )

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

#ಫಾಕ್ಸ್ ಡಿವ್ (ಸ್ಥಾನ:ಸಂಬಂಧಿ; ಫ್ಲೋಟ್:ಎಡ; ಅಗಲ:30%; ) #ಫಾಕ್ಸ್ .ಮುಖ್ಯ (ಎಡ:35%) #ಫಾಕ್ಸ್ .supp1 (ಎಡ:-28.5%) #ಫಾಕ್ಸ್ .supp2 (ಎಡ:8.5%)

ಇತರ ಎರಡು ಕಾಲಮ್‌ಗಳನ್ನು ಹಿನ್ನೆಲೆಯೊಂದಿಗೆ ಹುಸಿ-ಅಂಶಗಳನ್ನು ಬಳಸಿ ರಚಿಸಲಾಗಿದೆ. ಅಗತ್ಯವಿದ್ದರೆ ನೀವು ಚಿತ್ರಗಳನ್ನು ಹಿನ್ನೆಲೆಯಾಗಿ ಬಳಸಬಹುದು.

#ಫಾಕ್ಸ್:ಮೊದಲು, #ಫಾಕ್ಸ್:ನಂತರ (ವಿಷಯ:""; ಸ್ಥಾನ:ಸಂಪೂರ್ಣ; z-ಸೂಚ್ಯಂಕ:-1; ಮೇಲ್ಭಾಗ:0; ಬಲ:0; ಕೆಳಗೆ:0; ಎಡ:33.333%; ಹಿನ್ನೆಲೆ:#f9b6ff; ) # ಮರ್ಯಾದೋಲ್ಲಂಘನೆ:ನಂತರ (ಎಡ:66.667%; ಹಿನ್ನೆಲೆ:#79daff; )

ಮಾದರಿ ಕೋಡ್: ಬಹು ಸ್ಟ್ರೋಕ್

ಬಹು ಸ್ಟ್ರೋಕ್‌ಗಳನ್ನು ಬಹುತೇಕ ಒಂದೇ ರೀತಿಯಲ್ಲಿ ಆಯೋಜಿಸಲಾಗಿದೆ. ಪರಿಣಾಮವನ್ನು ಉಳಿಸಿಕೊಳ್ಳುವಾಗ ಅದರ ಬಳಕೆಯು ಚಿತ್ರಗಳನ್ನು ತ್ಯಜಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

ಅಂಶವು ಹುಸಿ-ಅಂಶಗಳಿಂದ ರಚಿಸಲ್ಪಡುವ ಹೆಚ್ಚುವರಿ ಸ್ಟ್ರೋಕ್ ಅನ್ನು ಹೊಂದಲು ಸಾಕಷ್ಟು ಸಂಬಂಧಿತ ಸ್ಥಾನ ಮತ್ತು ಪ್ಯಾಡಿಂಗ್ ಅಗಲವನ್ನು ಹೊಂದಿರಬೇಕು.

#ಗಡಿಗಳು (ಸ್ಥಾನ: ಸಂಬಂಧಿ; z-ಸೂಚ್ಯಂಕ: 1; ಪ್ಯಾಡಿಂಗ್: 30px; ಗಡಿ: 5px ಘನ #f00; ಹಿನ್ನೆಲೆ:#ff9600; )

ಹುಸಿ-ಅಂಶವನ್ನು ಅಂಶದ ಗಡಿಯಿಂದ ಸೂಕ್ತ ದೂರದಲ್ಲಿ ಇರಿಸಲಾಗುತ್ತದೆ, ಋಣಾತ್ಮಕ z- ಸೂಚಿಯನ್ನು ಬಳಸಿಕೊಂಡು ವಿಷಯ ಪದರದ ಕೆಳಗೆ ಇರಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಅದಕ್ಕೆ ಅಗತ್ಯವಿರುವ ಸ್ಟ್ರೋಕ್ ಮತ್ತು ಹಿನ್ನೆಲೆಯನ್ನು ನೀಡಲಾಗುತ್ತದೆ.

#ಗಡಿಗಳು:ಮೊದಲು (ವಿಷಯ:""; ಸ್ಥಾನ:ಸಂಪೂರ್ಣ; z-ಸೂಚ್ಯಂಕ:-1; ಮೇಲ್ಭಾಗ:5px; ಎಡ:5px; ಬಲ:5px; ಕೆಳಗೆ:5px; ಗಡಿ:5px ಘನ #ffea00; ಹಿನ್ನೆಲೆ:#4aa929; ) #ಗಡಿಗಳು:ನಂತರ (ವಿಷಯ:""; ಸ್ಥಾನ:ಸಂಪೂರ್ಣ; z-ಸೂಚ್ಯಂಕ:-1; ಮೇಲ್ಭಾಗ:15px; ಎಡ:15px; ಬಲ:15px; ಕೆಳಗೆ:15px; ಗಡಿ:5px ಘನ #00b4ff; ಹಿನ್ನೆಲೆ:#fff; )

ಪ್ರಗತಿಶೀಲ ಸುಧಾರಣೆಗಳು ಮತ್ತು ಲೆಗಸಿ ಬ್ರೌಸರ್‌ಗಳು

IE6 ಮತ್ತು IE7 CSS 2.1 ಸ್ಯೂಡೋ-ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಬೆಂಬಲಿಸುವುದಿಲ್ಲ ಮತ್ತು ಘೋಷಣೆಗಳ ಮೊದಲು ಮತ್ತು: ನಂತರ ಎಲ್ಲವನ್ನೂ ನಿರ್ಲಕ್ಷಿಸಿ. ಅವರು ಎಲ್ಲಾ ಸುಧಾರಣೆಗಳನ್ನು ತರುವುದಿಲ್ಲ, ಆದರೆ ಪ್ರಮುಖ ಕಾರ್ಯವನ್ನು ಉಳಿಸಿಕೊಳ್ಳುತ್ತಾರೆ.

ಫೈರ್‌ಫಾಕ್ಸ್ 3.0 ಬಳಸುವಾಗ ಗಮನ

Firefox 3.0 CSS 2.1 ಹುಸಿ ಅಂಶಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ, ಆದರೆ ಅವುಗಳ ಸ್ಥಾನವನ್ನು ಬೆಂಬಲಿಸುವುದಿಲ್ಲ. ಈ ಭಾಗಶಃ ಬೆಂಬಲದಿಂದಾಗಿ, ಹುಸಿ ಅಂಶಗಳ ಅಗಲ ಅಥವಾ ಎತ್ತರದ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ಅವಲಂಬಿಸಿರುವ ಪರಿಣಾಮಗಳು ಭಯಾನಕವಾಗಿ ಕಾಣಿಸಬಹುದು. ಇಲ್ಲ ಪರ್ಯಾಯ ಮಾರ್ಗ Firefox 3.0 ಗಾಗಿ ನೀವು ಅಗಲ ಅಥವಾ ಎತ್ತರದ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಿದರೆ. ಕೆಲವೊಮ್ಮೆ ಕೆಲವು ಸುಧಾರಣೆಗಳನ್ನು ಸ್ಯೂಡೋ-ಎಲಿಮೆಂಟ್ ಶೈಲಿಗಳಿಗೆ ಡಿಸ್ಪ್ಲೇ:ಬ್ಲಾಕ್ ಸೇರಿಸುವ ಮೂಲಕ ಸಾಧಿಸಬಹುದು.

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

ಬಳಸುವ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಈ ಸಮಸ್ಯೆಯನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಪರಿಹರಿಸಲಾಗಿದೆ ಸಂಪೂರ್ಣ ಸ್ಥಾನೀಕರಣ, ಅಗಲ ಅಥವಾ ಎತ್ತರದ ಗುಣಲಕ್ಷಣಗಳ ಬದಲಿಗೆ.

CSS3 ನೊಂದಿಗೆ ಸುಧಾರಣೆಗಳು

ಈ ಲೇಖನದಲ್ಲಿ ಅಳವಡಿಸಲಾಗಿರುವ ಎಲ್ಲಾ ಉದಾಹರಣೆಗಳನ್ನು CSS3 ಬಳಸಿಕೊಂಡು ಸುಧಾರಿಸಬಹುದು.

ಗಡಿ-ತ್ರಿಜ್ಯ , rgba , ರೂಪಾಂತರ ಗುಣಲಕ್ಷಣಗಳು ಮತ್ತು ಬಹು CSS3 ಹಿನ್ನೆಲೆಗಳನ್ನು ಹುಸಿ ಅಂಶಗಳೊಂದಿಗೆ ಸಂಯೋಜನೆಯಲ್ಲಿ ಬಳಸುವುದು ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಪರಿಣಾಮಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವ ಸಾಧ್ಯತೆಯನ್ನು ತೆರೆಯುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಆನ್ ಪ್ರಸ್ತುತ ಕ್ಷಣ CSS3 ಅನಿಮೇಷನ್‌ಗಳು ಅಥವಾ ಹುಸಿ ಅಂಶಗಳಿಗಾಗಿ ರೂಪಾಂತರಗಳನ್ನು ಬೆಂಬಲಿಸುವ ಯಾವುದೇ ಬ್ರೌಸರ್‌ಗಳಿಲ್ಲ.

ಭವಿಷ್ಯ: CSS3 ಸ್ಯೂಡೋ-ಎಲಿಮೆಂಟ್ಸ್

CSS3 ಹುಸಿ-ಎಲಿಮೆಂಟ್‌ಗಳಿಗೆ ಸೂಚಿಸಲಾದ ವರ್ಧನೆಗಳು (CSS3 ರಚಿತವಾದ ಮತ್ತು ಬದಲಾಯಿಸಲಾದ ವಿಷಯ ಮಾಡ್ಯೂಲ್ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು ನೋಡಿ) ಬೌಂಡ್ ಹುಸಿ-ಅಂಶಗಳನ್ನು (:: ಮೊದಲು:: ಮೊದಲು), ಬಹು ಹುಸಿ-ಅಂಶಗಳು (:: ನಂತರ (2)), ಸುತ್ತುವ ಹುಸಿ-ಅಂಶಗಳನ್ನು ಒಳಗೊಂಡಿವೆ ( : : ಹೊರಗೆ) ಮತ್ತು ಡಾಕ್ಯುಮೆಂಟ್‌ನ ಲೋಡ್ ಮಾಡಲಾದ ಭಾಗಗಳಿಗೆ ಹುಸಿ-ಅಂಶಗಳನ್ನು ಸೇರಿಸುವ ಸಾಮರ್ಥ್ಯ (:: ಪರ್ಯಾಯ).

ಅಂತಹ ಬದಲಾವಣೆಗಳು ಪ್ರಾಯೋಗಿಕವಾಗಿ ತೆರೆದುಕೊಳ್ಳುತ್ತವೆ ಅನಿಯಮಿತ ಸಾಧ್ಯತೆಗಳುಕೇವಲ ಒಂದು ಅಂಶ ಮತ್ತು ಹುಸಿ-ಅಂಶಗಳ ಗುಂಪಿನೊಂದಿಗೆ ಎಲ್ಲಾ ರೀತಿಯ ಪರಿಣಾಮಗಳನ್ನು ರಚಿಸಲು.

• ಟ್ಯುಟೋರಿಯಲ್

ನಾವು ಈಗಾಗಲೇ CSS3 ಹಿನ್ನೆಲೆಗಳು ಮತ್ತು ಬಾರ್ಡರ್ಸ್ ಮಾಡ್ಯೂಲ್ನ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಸ್ಪರ್ಶಿಸಿದ್ದೇವೆ, ನೆರಳುಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವುದನ್ನು ನೋಡುತ್ತೇವೆ (). ಇಂದು ನಾವು ಇನ್ನೊಂದರ ಬಗ್ಗೆ ಸ್ವಲ್ಪ ಮಾತನಾಡುತ್ತೇವೆ ಆಸಕ್ತಿದಾಯಕ ಅವಕಾಶ- ಹಿನ್ನೆಲೆಯಲ್ಲಿ ಬಹು ಚಿತ್ರಗಳನ್ನು ಬಳಸುವುದು.

ಹಿನ್ನೆಲೆ ಸಂಯೋಜನೆ

ಹಿನ್ನಲೆಯಲ್ಲಿ ನೀವು ಬಹು ಚಿತ್ರಗಳನ್ನು ರಚಿಸಲು ಬಯಸುವುದಕ್ಕೆ ಹಲವು ಕಾರಣಗಳಿವೆ, ಅವುಗಳಲ್ಲಿ ಪ್ರಮುಖವಾದವುಗಳು:

• ಒಂದು ವೇಳೆ ಚಿತ್ರದ ಗಾತ್ರದಲ್ಲಿ ಸಂಚಾರ ಉಳಿತಾಯ ವೈಯಕ್ತಿಕ ಚಿತ್ರಗಳುಒಟ್ಟಾರೆಯಾಗಿ ಚಪ್ಪಟೆಯಾದ ಪದರಗಳನ್ನು ಹೊಂದಿರುವ ಚಿತ್ರಕ್ಕಿಂತ ಕಡಿಮೆ ತೂಕ, ಮತ್ತು
• ಪ್ರತ್ಯೇಕ ಪದರಗಳ ಸ್ವತಂತ್ರ ನಡವಳಿಕೆಯ ಅಗತ್ಯತೆ, ಉದಾಹರಣೆಗೆ, ಭ್ರಂಶ ಪರಿಣಾಮಗಳನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸುವಾಗ.

ಇತರ ಸಮಂಜಸವಾದ ಕಾರಣಗಳು ಇರಬಹುದು :)

ಶಾಸ್ತ್ರೀಯ ವಿಧಾನ

ಆದ್ದರಿಂದ ನಾವು ಹಲವಾರು ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳನ್ನು ಒಂದರ ಮೇಲೊಂದರಂತೆ ಇರಿಸಬೇಕಾಗುತ್ತದೆ. ಈ ಸಮಸ್ಯೆಯನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಹೇಗೆ ಪರಿಹರಿಸಲಾಗುತ್ತದೆ? ಇದು ತುಂಬಾ ಸರಳವಾಗಿದೆ: ಪ್ರತಿ ಹಿನ್ನೆಲೆ ಚಿತ್ರಕ್ಕಾಗಿ, ಒಂದು ಬ್ಲಾಕ್ ಅನ್ನು ರಚಿಸಲಾಗಿದೆ, ಅದಕ್ಕೆ ಅನುಗುಣವಾದ ಹಿನ್ನೆಲೆ ಚಿತ್ರವನ್ನು ನಿಗದಿಪಡಿಸಲಾಗಿದೆ. ಬ್ಲಾಕ್ಗಳನ್ನು ಒಂದರೊಳಗೊಂದು ಗೂಡುಕಟ್ಟಲಾಗುತ್ತದೆ ಅಥವಾ ಸೂಕ್ತವಾದ ಸ್ಥಾನಿಕ ನಿಯಮಗಳೊಂದಿಗೆ ಸಾಲಾಗಿ ಇರಿಸಲಾಗುತ್ತದೆ. ಒಂದು ಸರಳ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ:

"ಮತ್ಸ್ಯಕನ್ಯೆ" ಒಳಗೆ "ಮೀನುಗಾರಿಕೆ" ವರ್ಗವನ್ನು ಹೊಂದಿರುವ ಬ್ಲಾಕ್ ಪ್ರದರ್ಶನ ಉದ್ದೇಶಗಳಿಗಾಗಿ ಮಾತ್ರ.

ಈಗ ಕೆಲವು ಶೈಲಿಗಳು:
.ಮಾದರಿ1 .ಸಮುದ್ರ, .ಮಾದರಿ1 .ಮತ್ಸ್ಯಕನ್ಯೆ, .ಮಾದರಿ1 .ಮೀನುಗಾರಿಕೆ (ಎತ್ತರ:300px; ಅಗಲ:480px; ಸ್ಥಾನ: ಸಂಬಂಧಿ; ) .ಮಾದರಿ1 .ಸಮುದ್ರ (ಹಿನ್ನೆಲೆ: url(media/sea.png) ಪುನರಾವರ್ತಿಸಿ-x ಮೇಲಿನ ಎಡ; ) .sample1 .mermaid (ಹಿನ್ನೆಲೆ: url(media/mermaid.svg) ಪುನರಾವರ್ತಿತ-x ಕೆಳಗಿನ ಎಡ; : 30px; ಟಾಪ್: 90px; ಸ್ಥಾನ: ಸಂಪೂರ್ಣ ) .ಮಾದರಿ 1

ಫಲಿತಾಂಶ:

IN ಈ ಉದಾಹರಣೆಯಲ್ಲಿಮೂರು ನೆಸ್ಟೆಡ್ ಹಿನ್ನೆಲೆಗಳು ಮತ್ತು "ಹಿನ್ನೆಲೆ" ಬ್ಲಾಕ್‌ಗಳ ಪಕ್ಕದಲ್ಲಿರುವ ಮೀನಿನೊಂದಿಗೆ ಒಂದು ಬ್ಲಾಕ್. ಸಿದ್ಧಾಂತದಲ್ಲಿ, ಮೀನುಗಳನ್ನು ಸರಿಸಬಹುದು, ಉದಾಹರಣೆಗೆ, ಜೊತೆಗೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿಅಥವಾ CSS3 ಪರಿವರ್ತನೆಗಳು/ಅನಿಮೇಷನ್‌ಗಳು.

ಮೂಲಕ, ".fishing" ಗಾಗಿ ಈ ಉದಾಹರಣೆಯು ಹಿನ್ನೆಲೆ ಸ್ಥಾನೀಕರಣಕ್ಕಾಗಿ ಹೊಸ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ಬಳಸುತ್ತದೆ, ಇದನ್ನು CSS3 ನಲ್ಲಿ ಸಹ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ:
ಹಿನ್ನೆಲೆ: url(media/fishing.svg) ಇಲ್ಲ-ಪುನರಾವರ್ತನೆ ಮೇಲಿನ ಬಲ 10px;
ಇದು ಪ್ರಸ್ತುತ IE9+ ಮತ್ತು Opera 11+ ನಲ್ಲಿ ಬೆಂಬಲಿತವಾಗಿದೆ, ಆದರೆ Firefox 10 ಮತ್ತು Chrome 16 ನಲ್ಲಿ ಬೆಂಬಲಿತವಾಗಿಲ್ಲ. ಆದ್ದರಿಂದ ಕೊನೆಯ ಎರಡು ಬ್ರೌಸರ್‌ಗಳ ಬಳಕೆದಾರರಿಗೆ ಇನ್ನೂ ಮೀನು ಹಿಡಿಯಲು ಸಾಧ್ಯವಾಗುವುದಿಲ್ಲ.

ಬಹು ಹಿನ್ನೆಲೆಗಳು

ರಕ್ಷಣೆಗೆ ಬರುತ್ತದೆ ಹೊಸ ಆಯ್ಕೆ, CSS3 ಗೆ ಸೇರಿಸಲಾಗಿದೆ, ಒಂದು ಅಂಶಕ್ಕಾಗಿ ಬಹು ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ಸಾಮರ್ಥ್ಯ. ಇದು ಈ ರೀತಿ ಕಾಣುತ್ತದೆ:

ಮತ್ತು ಅನುಗುಣವಾದ ಶೈಲಿಗಳು:
.sample2 .sea (ಎತ್ತರ:300px; ಅಗಲ:480px; ಸ್ಥಾನ: ಸಂಬಂಧಿ; ಹಿನ್ನೆಲೆ-ಚಿತ್ರ: url("media/mermaid.svg"), url("media/mermaid.svg"), url("media/sea. png"); ಹಿನ್ನೆಲೆ-ಸ್ಥಾನ: ಮೇಲಿನ ಬಲ 10px, ಕೆಳಗಿನ ಎಡ, ಮೇಲಿನ ಎಡ; ಹಿನ್ನೆಲೆ-ಪುನರಾವರ್ತನೆ: ನೋ-ಪುನರಾವರ್ತನೆ, ಪುನರಾವರ್ತನೆ-x, ಪುನರಾವರ್ತಿಸಿ-x ; ) .sample2 .ಮೀನು (ಹಿನ್ನೆಲೆ: url("media/fish.svg ") ಇಲ್ಲ-ಪುನರಾವರ್ತನೆ; ಎತ್ತರ:70px; ಅಗಲ:100px; ಎಡ: 30px; ಮೇಲ್ಭಾಗ: 90px; ಸ್ಥಾನ: ಸಂಪೂರ್ಣ; )
ಬಹು ಚಿತ್ರಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು, ನೀವು ಹಿನ್ನೆಲೆ-ಚಿತ್ರದ ನಿಯಮವನ್ನು ಬಳಸಬೇಕು, ಅಲ್ಪವಿರಾಮದಿಂದ ಪ್ರತ್ಯೇಕಿಸಲಾದ ಪ್ರತ್ಯೇಕ ಚಿತ್ರಗಳನ್ನು ಪಟ್ಟಿಮಾಡಬೇಕು. ಹೆಚ್ಚುವರಿ ನಿಯಮಗಳು, ಪಟ್ಟಿಯಂತೆ, ನೀವು ಪ್ರತಿ ಚಿತ್ರಕ್ಕಾಗಿ ಸ್ಥಾನೀಕರಣ, ಪುನರಾವರ್ತನೆಗಳು ಮತ್ತು ಇತರ ನಿಯತಾಂಕಗಳನ್ನು ಹೊಂದಿಸಬಹುದು. ಚಿತ್ರಗಳನ್ನು ಪಟ್ಟಿ ಮಾಡಲಾದ ಕ್ರಮವನ್ನು ಗಮನಿಸಿ: ಲೇಯರ್‌ಗಳನ್ನು ಎಡದಿಂದ ಬಲಕ್ಕೆ ಮೇಲಿನಿಂದ ಕೆಳಗಿನವರೆಗೆ ಪಟ್ಟಿ ಮಾಡಲಾಗಿದೆ.

ಫಲಿತಾಂಶವು ಒಂದೇ ಆಗಿರುತ್ತದೆ:

ಒಂದು ನಿಯಮ

ನಂತರದ ಕುಶಲತೆಗಳಿಗಾಗಿ ಮೀನನ್ನು ಪ್ರತ್ಯೇಕ ಬ್ಲಾಕ್ ಆಗಿ ಬೇರ್ಪಡಿಸುವ ಅಗತ್ಯವಿಲ್ಲದಿದ್ದರೆ, ಸಂಪೂರ್ಣ ಚಿತ್ರವನ್ನು ಒಂದರಿಂದ ಪುನಃ ಬರೆಯಬಹುದು ಸರಳ ನಿಯಮ:

ಶೈಲಿಗಳು:
.sample3 .sea (ಎತ್ತರ:300px; ಅಗಲ:480px; ಸ್ಥಾನ: ಸಂಬಂಧಿ; ಹಿನ್ನೆಲೆ-ಚಿತ್ರ: url("media/mermaid.svg"), url("media/mermaid.svg"), url("media/fish. svg"), url("media/sea.png"); ಹಿನ್ನೆಲೆ-ಸ್ಥಾನ: ಮೇಲಿನ ಬಲ 10px, ಕೆಳಗಿನ ಎಡ, 30px 90px, ಮೇಲಿನ ಎಡ; ಹಿನ್ನೆಲೆ-ಪುನರಾವರ್ತನೆ: ಇಲ್ಲ-ಪುನರಾವರ್ತನೆ, ಪುನರಾವರ್ತನೆ-x ; )

ನಾನು ಫಲಿತಾಂಶದ ಚಿತ್ರವನ್ನು ತೋರಿಸುವುದಿಲ್ಲ - ನನ್ನನ್ನು ನಂಬಿರಿ, ಇದು ಮೇಲಿನ ಎರಡು ಚಿತ್ರಗಳೊಂದಿಗೆ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆ. ಆದರೆ ಮತ್ತೆ ಶೈಲಿಗಳಿಗೆ ಗಮನ ಕೊಡಿ, ವಿಶೇಷವಾಗಿ “ಹಿನ್ನೆಲೆ-ಪುನರಾವರ್ತನೆ” - ನಿರ್ದಿಷ್ಟತೆಯ ಪ್ರಕಾರ, ಕೊನೆಯಲ್ಲಿ ಪಟ್ಟಿಯ ಭಾಗವು ಕಾಣೆಯಾಗಿದ್ದರೆ, ಚಿತ್ರಗಳ ಸಂಖ್ಯೆಯನ್ನು ಹೊಂದಿಸಲು ಬ್ರೌಸರ್ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಪಟ್ಟಿಯನ್ನು ಅಗತ್ಯವಿರುವ ಸಂಖ್ಯೆಯ ಬಾರಿ ಪುನರಾವರ್ತಿಸಬೇಕು. ಪಟ್ಟಿಯಲ್ಲಿ.

ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಇದು ಈ ವಿವರಣೆಗೆ ಸಮನಾಗಿರುತ್ತದೆ:
ಹಿನ್ನೆಲೆ-ಪುನರಾವರ್ತನೆ: ನೋ-ಪುನರಾವರ್ತನೆ, ಪುನರಾವರ್ತನೆ-x, ಇಲ್ಲ-ಪುನರಾವರ್ತನೆ, ಪುನರಾವರ್ತನೆ-x;

ಇನ್ನೂ ಚಿಕ್ಕದಾಗಿದೆ

ನೀವು CSS 2.1 ಅನ್ನು ನೆನಪಿಸಿಕೊಂಡರೆ, ಇದು ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳನ್ನು ಸಂಕ್ಷಿಪ್ತ ರೂಪದಲ್ಲಿ ವಿವರಿಸುವ ಸಾಮರ್ಥ್ಯವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ಬಹು ಚಿತ್ರಗಳ ಬಗ್ಗೆ ಹೇಗೆ? ಇದು ಸಹ ಸಾಧ್ಯ:

ಮಾದರಿ4 .ಸಮುದ್ರ (ಎತ್ತರ:300px; ಅಗಲ:480px; ಸ್ಥಾನ: ಸಂಬಂಧಿ; ಹಿನ್ನೆಲೆ: url("media/fishing.svg") ಮೇಲಿನ ಬಲ 10px ನೋ-ಪುನರಾವರ್ತನೆ, url("media/mermaid.svg") ಕೆಳಗಿನ ಎಡಭಾಗ ಪುನರಾವರ್ತನೆ-x , url("media/fish.svg") 30px 90px ನೋ-ರಿಪೀಟ್, url("media/sea.png") repeat-x )

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

ಡೈನಾಮಿಕ್ ಚಿತ್ರಗಳು

ಕಂಟೇನರ್‌ನ ಗಾತ್ರವನ್ನು ಅವಲಂಬಿಸಿ ಸಂಯೋಜನೆಯು ಸ್ಥಿರ ಅಥವಾ ಕ್ರಿಯಾತ್ಮಕವಾಗಿದ್ದರೆ, ನಂತರ ಬಹು ಹಿನ್ನೆಲೆಗಳು ಪುಟದ ವಿನ್ಯಾಸವನ್ನು ನಿಸ್ಸಂಶಯವಾಗಿ ಸರಳಗೊಳಿಸುತ್ತವೆ. ಆದರೆ ನೀವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ (ಸರಿಸು, ಸ್ಕ್ರಾಲ್, ಇತ್ಯಾದಿ) ನಿಂದ ಸ್ವತಂತ್ರವಾಗಿ ಸಂಯೋಜನೆಯ ಪ್ರತ್ಯೇಕ ಅಂಶಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಬೇಕಾದರೆ ಏನು ಮಾಡಬೇಕು?

ಅಂದಹಾಗೆ, ಜೀವನದಿಂದ ಒಂದು ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ - ಯಾಂಡೆಕ್ಸ್‌ನಲ್ಲಿ ದಂಡೇಲಿಯನ್ ಹೊಂದಿರುವ ಥೀಮ್:


ನೀವು ಕೋಡ್ ಅನ್ನು ನೋಡಿದರೆ, ನೀವು ಈ ರೀತಿಯದನ್ನು ನೋಡುತ್ತೀರಿ:

...

"b-fluff-bg", "b-fluff__cloud" ಮತ್ತು "b-fluff__item" ತರಗತಿಗಳನ್ನು ಹೊಂದಿರುವ ಬ್ಲಾಕ್‌ಗಳು ಪರಸ್ಪರ ಅತಿಕ್ರಮಿಸುವ ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತವೆ. ಇದಲ್ಲದೆ, ಮೋಡಗಳೊಂದಿಗಿನ ಹಿನ್ನೆಲೆ ನಿರಂತರವಾಗಿ ಸ್ಕ್ರಾಲ್ ಆಗುತ್ತದೆ, ಮತ್ತು ದಂಡೇಲಿಯನ್ಗಳು ಪರದೆಯ ಮೇಲೆ ಹಾರುತ್ತವೆ.

ಬಹು ಹಿನ್ನೆಲೆಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಇದನ್ನು ಪುನಃ ಬರೆಯಬಹುದೇ? ತಾತ್ವಿಕವಾಗಿ, ಹೌದು, ಆದರೆ 1) ಗುರಿ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಈ ವೈಶಿಷ್ಟ್ಯಕ್ಕೆ ಬೆಂಬಲ ಮತ್ತು... 2) ಓದಿ;)

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

ನಮ್ಮ ಮೀನಿನ ಹಿನ್ನೆಲೆಗೆ ಅನಿಮೇಷನ್ ಸೇರಿಸಲು, ನೀವು ಈ ಕೆಳಗಿನ ಕೋಡ್ ಅನ್ನು ಬಳಸಬಹುದು:
$(ಡಾಕ್ಯುಮೆಂಟ್).ಸಿದ್ಧ(ಕಾರ್ಯ() (ವರ್ ಸೀ = $(".ಮಾದರಿ5 .ಸಮುದ್ರ"); var fishesX = 30; var fishesY = 90; var fishX = 0; var fishY = 0; var mermaidX = 0; var t = 0; ಫಂಕ್ಷನ್ ಅನಿಮೇಷನ್ ಲೂಪ್() ( fishesY = 90 + Math.floor(30 * Math.sin(t++ / 180.0)); if(--fishesX< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480) ಮತ್ಸ್ಯಕನ್ಯೆX = 0;
fishY = -10 + (10 * Math.cos(t * 0.091));
fishX = 10 + (5 * Math.sin (t * 0.07));

sea.style.backgroundPosition = "ಟಾಪ್ " + fishY + "px ಬಲ" + fishX + "px, " + mermaidX + "px ಕೆಳಗೆ," + fishesX + "px " + fishesY + "px, ಮೇಲಿನ ಎಡ";

window.requestAnimFrame(animationLoop);

) ಅನಿಮೇಷನ್ ಲೂಪ್ (); ));

ಎಲ್ಲಿ window.requestAnimFrame = (ಫಂಕ್ಷನ್() ( ರಿಟರ್ನ್ window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || window.webkitRequestAnimationFrame || (1callTback, out (1callT0) ));ಮತ್ತು ಮೂಲಕ, CSS3 ಪರಿವರ್ತನೆಗಳು/ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಸಹ ಮಾಡಬಹುದು, ಆದರೆ ಇದು ಪ್ರತ್ಯೇಕ ಚರ್ಚೆಗೆ ಒಂದು ವಿಷಯವಾಗಿದೆ.

ಭ್ರಂಶ ಮತ್ತು ಪರಸ್ಪರ ಕ್ರಿಯೆ

ಇದನ್ನು ಅನುಕೂಲಕರವಾದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್‌ನಲ್ಲಿ ಸುತ್ತಿಡಬಹುದು ಎಂದು ನನಗೆ ಖಾತ್ರಿಯಿದೆ, ಇದು ವೈಯಕ್ತಿಕ ಲೇಯರ್‌ಗಳೊಂದಿಗಿನ ಸಂಬಂಧಗಳ ವರ್ಚುವಲೈಸೇಶನ್ ಅನ್ನು ನೋಡಿಕೊಳ್ಳುತ್ತದೆ, ಆದರೆ ಪುಟದ html ಕೋಡ್ ಅನ್ನು ಸಾಧ್ಯವಾದಷ್ಟು ಸ್ವಚ್ಛವಾಗಿ ಬಿಡುತ್ತದೆ.

ಹೊಂದಾಣಿಕೆಯ ಬಗ್ಗೆ ಏನು?

ಎಲ್ಲಾ ಆಧುನಿಕ ಆವೃತ್ತಿಗಳು ಜನಪ್ರಿಯ ಬ್ರೌಸರ್‌ಗಳು, IE9+ ಸೇರಿದಂತೆ, ಬಹು ಚಿತ್ರಗಳನ್ನು ಬೆಂಬಲಿಸಿ (ನೀವು ಪರಿಶೀಲಿಸಬಹುದು, ಉದಾಹರಣೆಗೆ, Caniuse).

ಬಹು ಹಿನ್ನೆಲೆಗಳನ್ನು ಬೆಂಬಲಿಸದ ಬ್ರೌಸರ್‌ಗಳನ್ನು ಒದಗಿಸಲು ನೀವು Modernizr ಅನ್ನು ಸಹ ಬಳಸಬಹುದು ಪರ್ಯಾಯ ಪರಿಹಾರಗಳು. ಕ್ರಿಸ್ ಕೊಯ್ಯರ್ ತನ್ನ ಪೋಸ್ಟ್‌ನಲ್ಲಿ ಬಹು ಹಿನ್ನೆಲೆಗಳನ್ನು ಬಳಸುವಾಗ ಲೇಯರ್ ಆರ್ಡರ್ ಕುರಿತು ಬರೆದಂತೆ, ಈ ರೀತಿ ಮಾಡಿ:

Multiplebgs ಬಾಡಿ ( /* ವಾಸ್ತವವನ್ನು ಮೀರಿಸುವಂತಹ ಅದ್ಭುತ ಬಹು BG ಘೋಷಣೆಗಳು ಮತ್ತು ಮರಿಗಳು ಮೂಲಸೌಕರ್ಯ */ ) .no-multiplebgs ದೇಹ ( /* laaaaaame fallback */ )
ಒದಗಿಸಲು JS ಅನ್ನು ಬಳಸುವ ಬಗ್ಗೆ ನೀವು ಗೊಂದಲಕ್ಕೊಳಗಾಗಿದ್ದರೆ ಹಿಂದುಳಿದ ಹೊಂದಾಣಿಕೆ, ನೀವು ಎರಡು ಬಾರಿ ಹಿನ್ನೆಲೆಯನ್ನು ಸರಳವಾಗಿ ಘೋಷಿಸಬಹುದು, ಆದಾಗ್ಯೂ, ಇದು ಸಂಭವನೀಯ ರೂಪದಲ್ಲಿ ಅದರ ಅನಾನುಕೂಲಗಳನ್ನು ಹೊಂದಿದೆ ಡ್ಯುಯಲ್ ಬೂಟ್ಸಂಪನ್ಮೂಲಗಳು (ಇದು ಅನುಷ್ಠಾನದ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿರುತ್ತದೆ css ಸಂಸ್ಕರಣೆನಿರ್ದಿಷ್ಟ ಬ್ರೌಸರ್‌ನಲ್ಲಿ):

/* ಬಹು ಬಿಜಿ ಫಾಲ್‌ಬ್ಯಾಕ್ */ ಹಿನ್ನೆಲೆ: #000 url(...) ...; /* ರಿಯಾಲಿಟಿ ಅನ್ನು ಮೀರಿಸುವಂತಹ ಅದ್ಭುತ ಬಹು BG ಘೋಷಣೆಗಳು ಮತ್ತು ಚಿಕ್ಸ್‌ಗಳನ್ನು */ ಹಿನ್ನೆಲೆ url(...), url(...), url(...), #000 url(...);

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

ಪಿ.ಎಸ್. ವಿಷಯದ ಕುರಿತು: ನಾನು ಸಹಾಯ ಮಾಡಲು ಸಾಧ್ಯವಿಲ್ಲ ಆದರೆ ಬಗ್ಗೆ ಅದ್ಭುತ ಲೇಖನವನ್ನು ನೆನಪಿಸಿಕೊಳ್ಳುತ್ತೇನೆ.

ಟ್ಯಾಗ್ಗಳು:

• css3
• ಬಹು ಹಿನ್ನೆಲೆಗಳು
• ಗಡಿಗಳು ಮತ್ತು ಹಿನ್ನೆಲೆಗಳು

ಟ್ಯಾಗ್‌ಗಳನ್ನು ಸೇರಿಸಿ

ಬಗ್ಗೆ ಮಾತನಾಡುತ್ತಿದ್ದಾರೆ ಹಿನ್ನೆಲೆ-ಚಿತ್ರದ ಆಸ್ತಿಈ ವಿಭಾಗದ ಆರಂಭದಲ್ಲಿ, ನಾವು ಒಂದು ವೈಶಿಷ್ಟ್ಯವನ್ನು ಉಲ್ಲೇಖಿಸಿಲ್ಲ: CSS3 ನಲ್ಲಿ, ಅಲ್ಪವಿರಾಮದಿಂದ ಪ್ರತ್ಯೇಕಿಸಿ ಪಟ್ಟಿ ಮಾಡುವ ಮೂಲಕ ನೀವು ಒಂದು ಅಂಶಕ್ಕೆ ಬಹು ಹಿನ್ನೆಲೆಗಳನ್ನು ಸೇರಿಸಬಹುದು. ಹಿನ್ನೆಲೆ ಹೊಂದಿರುವ ಅಂಶವು ವೇರಿಯಬಲ್ ಅಗಲ ಅಥವಾ ಎತ್ತರವನ್ನು ಹೊಂದಿರುವಾಗ ಇದು ವಿಶೇಷವಾಗಿ ಅಗತ್ಯವಾಗಿರುತ್ತದೆ ಮತ್ತು ಹಿನ್ನೆಲೆ ಅದರ ಗಾತ್ರಕ್ಕೆ ಹೊಂದಿಕೊಳ್ಳಬೇಕು.

CSS ನಲ್ಲಿ ಬಹು ಹಿನ್ನೆಲೆಗಳನ್ನು ಹೇಗೆ ಹೊಂದಿಸುವುದು

ಆಚರಣೆಯಲ್ಲಿ ಉಪಯುಕ್ತವಾದ ಉದಾಹರಣೆಯನ್ನು ನಾವು ನಿಮಗೆ ತೋರಿಸುತ್ತೇವೆ. ನಾವು ಚೌಕಟ್ಟಿನಲ್ಲಿ ಪಠ್ಯದ ಬ್ಲಾಕ್ ಅನ್ನು ಇರಿಸಬೇಕಾಗಿದೆ ಎಂದು ಊಹಿಸೋಣ. ಫ್ರೇಮ್ ಪ್ರತಿನಿಧಿಸುತ್ತದೆ ಗ್ರಾಫಿಕ್ ಫೈಲ್ PNG ಸ್ವರೂಪದಲ್ಲಿ:

ಈ ಸಮಸ್ಯೆಯಲ್ಲಿ, ಪಠ್ಯದ ಎತ್ತರವು ನಮಗೆ ತಿಳಿದಿಲ್ಲ - ಪಠ್ಯವು ಚೌಕಟ್ಟಿನೊಳಗೆ ಸಂಪೂರ್ಣವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆಯೇ ಅಥವಾ ಅದನ್ನು ಮೀರಿ ಹೋಗುತ್ತದೆಯೇ ಎಂದು ನಮಗೆ ತಿಳಿದಿಲ್ಲ. ಈ ಅಜ್ಞಾತ ಪ್ರಮಾಣದಿಂದಾಗಿ, ನಾವು ಮೂಲ ಫ್ರೇಮ್ ವಿನ್ಯಾಸವನ್ನು ಹಿನ್ನೆಲೆಯಾಗಿ ಬಳಸುವ ಅಪಾಯವಿಲ್ಲ. ಮೂಗು CSS ಬಳಸಿನಾವು ಈ ಚೌಕಟ್ಟನ್ನು ಅಗತ್ಯವಿರುವಂತೆ ವಿಸ್ತರಿಸಬಹುದು. ಇದನ್ನು ಮಾಡಲು, ನೀವು ಗ್ರಾಫಿಕ್ಸ್ ಸಂಪಾದಕದಲ್ಲಿ ಮೂಲ ರೇಖಾಚಿತ್ರವನ್ನು ಮೂರು ಭಾಗಗಳಾಗಿ ವಿಂಗಡಿಸಬೇಕು - ಮೇಲಿನ, ಕೆಳಗಿನ ಮತ್ತು ಮಧ್ಯ - ಮತ್ತು ಪ್ರತಿ ಫೈಲ್ ಅನ್ನು ಪ್ರತ್ಯೇಕವಾಗಿ ಉಳಿಸಿ. ಈ ರೀತಿ:

ಚೌಕಟ್ಟಿನ ಮೇಲ್ಭಾಗ

ಚೌಕಟ್ಟಿನ ಕೆಳಭಾಗ

ಚೌಕಟ್ಟಿನ ಮಧ್ಯದಲ್ಲಿ

ಅಕ್ಷದ ಉದ್ದಕ್ಕೂ ಪುನರಾವರ್ತಿಸುವ ಚೌಕಟ್ಟಿನ ಮಧ್ಯದ ಚಿತ್ರದೊಂದಿಗೆ ನಾವು ಹಿನ್ನೆಲೆಯನ್ನು ಮಾಡುತ್ತೇವೆ ವೈ, ಫ್ರೇಮ್‌ನ ಮೇಲ್ಭಾಗ ಮತ್ತು ಕೆಳಭಾಗವನ್ನು ನಕಲು ಮಾಡಲಾಗುವುದಿಲ್ಲ. ಎಲ್ಲಾ ಮೂರು ಹಿನ್ನೆಲೆಗಳನ್ನು ಅಂಶಕ್ಕೆ ಸೇರಿಸೋಣ ಮತ್ತು ಇತರ ಅಗತ್ಯ ಶೈಲಿಗಳನ್ನು ಸಹ ಬರೆಯೋಣ:

ಫ್ರೇಮ್ (ಹಿನ್ನೆಲೆ-ಚಿತ್ರ: url(https://goo.gl/tKyzHt), /* ಮೇಲಿನ ಭಾಗಫ್ರೇಮ್‌ಗಳು */ url(https://goo.gl/SUKymM), /* ಫ್ರೇಮ್‌ನ ಕೆಳಭಾಗ */ url(https://goo.gl/Km7HVV); /* ಚೌಕಟ್ಟಿನ ಮಧ್ಯದಲ್ಲಿ */ ಹಿನ್ನೆಲೆ-ಸ್ಥಾನ: ಸೆಂಟರ್ ಟಾಪ್, /* ಫ್ರೇಮ್‌ನ ಮೇಲ್ಭಾಗದ ಸ್ಥಾನ */ ಸೆಂಟರ್ ಬಾಟಮ್, /* ಫ್ರೇಮ್‌ನ ಕೆಳಭಾಗದ ಸ್ಥಾನ */ ಸೆಂಟರ್ ಟಾಪ್; /* ಚೌಕಟ್ಟಿನ ಮಧ್ಯದ ಸ್ಥಾನ */ ಹಿನ್ನೆಲೆ-ಪುನರಾವರ್ತನೆ: ಇಲ್ಲ-ಪುನರಾವರ್ತನೆ, /* ಫ್ರೇಮ್‌ನ ಮೇಲ್ಭಾಗವು ಪುನರಾವರ್ತನೆಯಾಗುವುದಿಲ್ಲ */ ಪುನರಾವರ್ತನೆಯಾಗುವುದಿಲ್ಲ, /* ಫ್ರೇಮ್‌ನ ಕೆಳಭಾಗವು ಪುನರಾವರ್ತನೆಯಾಗುವುದಿಲ್ಲ */ ಪುನರಾವರ್ತಿಸಿ-y; /* ಚೌಕಟ್ಟಿನ ಮಧ್ಯಭಾಗವನ್ನು ಲಂಬವಾಗಿ ಪುನರಾವರ್ತಿಸಲಾಗುತ್ತದೆ */ ಹಿನ್ನೆಲೆ ಗಾತ್ರ: ಒಳಗೊಂಡಿರುತ್ತದೆ; /* ಎಲ್ಲಾ ಹಿನ್ನೆಲೆಗಳಿಗಾಗಿ ಇಲ್ಲಿ ಅದೇ ಮೌಲ್ಯ*/ ಎತ್ತರ: ಸ್ವಯಂ; /* ಬ್ಲಾಕ್ ಎತ್ತರವು ವಿಷಯದ ಪ್ರಮಾಣವನ್ನು ಅವಲಂಬಿಸಿರುತ್ತದೆ */ ಅಗಲ: 400px; /* ಬ್ಲಾಕ್ ಅಗಲವನ್ನು ನಿಗದಿಪಡಿಸಲಾಗಿದೆ */ ಪ್ಯಾಡಿಂಗ್: 30px; /* ಬ್ಲಾಕ್ ಪ್ಯಾಡಿಂಗ್ */)

ಪ್ರತಿಯೊಂದು ಹಿನ್ನೆಲೆಯನ್ನು ಅಲ್ಪವಿರಾಮದಿಂದ ಬೇರ್ಪಡಿಸಬೇಕು ಮತ್ತು ಕೊನೆಯದ ನಂತರ ಮಾತ್ರ ಘೋಷಣೆಯ ಅಂತ್ಯವನ್ನು ಸೂಚಿಸಲು ಅರ್ಧವಿರಾಮ ಚಿಹ್ನೆಯನ್ನು ಇರಿಸಲಾಗುತ್ತದೆ. ಅನುಕೂಲಕ್ಕಾಗಿ ಮತ್ತು ಕೋಡ್‌ನ ಉತ್ತಮ ಓದುವಿಕೆಗಾಗಿ, ಪ್ರತಿ URL ಅನ್ನು ಹೊಸ ಸಾಲಿನಲ್ಲಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ನಾವು ಶಿಫಾರಸು ಮಾಡುತ್ತೇವೆ.

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

ಮುಂದೆ, ಕೋಡ್ ಪ್ರತಿ ಹಿನ್ನೆಲೆಗೆ ಹಿನ್ನೆಲೆ-ಸ್ಥಾನ ಮತ್ತು ಹಿನ್ನೆಲೆ-ಪುನರಾವರ್ತಿತ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಹೊಂದಿಸುತ್ತದೆ (ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳನ್ನು ಜೋಡಿಸಲಾದ ಅದೇ ಕ್ರಮದಲ್ಲಿ). ಹೌದು, ನೀವು ಅದನ್ನು ಸರಿಯಾಗಿ ಊಹಿಸಿದ್ದೀರಿ: ಅಗತ್ಯವಿದ್ದರೆ, ಅಲ್ಪವಿರಾಮದಿಂದ ಬೇರ್ಪಟ್ಟ ಇತರ ಹಿನ್ನೆಲೆ ಗುಣಲಕ್ಷಣಗಳ ಮೌಲ್ಯಗಳನ್ನು ನೀವು ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು. ಮತ್ತು ನೀವು ಎಲ್ಲಾ ಹಿನ್ನೆಲೆಗಳಿಗೆ ಒಂದು ಮೌಲ್ಯವನ್ನು ಅನ್ವಯಿಸಬೇಕಾದರೆ, ನೀವು ಅದನ್ನು ಎಂದಿನಂತೆ ಬರೆಯುತ್ತೀರಿ (ನಮ್ಮ ಸಂದರ್ಭದಲ್ಲಿ, ಹಿನ್ನೆಲೆ ಗಾತ್ರ: ಆಸ್ತಿಯನ್ನು ಹೊಂದಿರುತ್ತದೆ).

ಸರಿ, ಫಲಿತಾಂಶವನ್ನು ನೋಡೋಣ:

ನೀವು ನೋಡುವಂತೆ, ಚೌಕಟ್ಟನ್ನು ಸರಿಯಾಗಿ ಇರಿಸಲಾಗಿದೆ, ಮತ್ತು ಈಗ ಅದು ಬ್ಲಾಕ್ನ ವಿಷಯಗಳನ್ನು ಸುಂದರವಾಗಿ ಫ್ರೇಮ್ ಮಾಡುತ್ತದೆ. ನಾವು ಬ್ಲಾಕ್ನಲ್ಲಿ ಪಠ್ಯದ ಪ್ರಮಾಣವನ್ನು ಹೆಚ್ಚಿಸಿದರೆ ಏನಾಗುತ್ತದೆ? ನೋಡೋಣ:

ನಮ್ಮ ಚೌಕಟ್ಟಿನ ಮಧ್ಯ ಭಾಗವನ್ನು ಲಂಬವಾಗಿ ಅಗತ್ಯವಿರುವ ಸಂಖ್ಯೆಯ ಬಾರಿ ನಕಲು ಮಾಡಲಾಗಿದೆ, ಉದ್ದವನ್ನು ವಿಸ್ತರಿಸಿ ಪಠ್ಯಕ್ಕೆ ಹೊಂದಿಸಿದಂತೆ. ನಾವು ಚೌಕಟ್ಟಿನ ಘನ ಚಿತ್ರವನ್ನು ಬಳಸಿದರೆ ಇದು ಅರಿತುಕೊಳ್ಳಲಾಗದ ಪರಿಣಾಮವಾಗಿದೆ. ಸ್ಪಷ್ಟತೆಗಾಗಿ ಇನ್ನಷ್ಟು ಪಠ್ಯವನ್ನು ಸೇರಿಸೋಣ:

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

ಸಂಕ್ಷಿಪ್ತ ಸಂಕೇತವನ್ನು ಬಳಸುವುದು

ಹಿನ್ನೆಲೆ ಆಸ್ತಿಯು ಬಹು ಮೌಲ್ಯಗಳನ್ನು ಸಹ ಸ್ವೀಕರಿಸುತ್ತದೆ. ಹಲವಾರು ಹಿನ್ನೆಲೆಗಳನ್ನು ಬಳಸುವ ಸಂದರ್ಭದಲ್ಲಿ, ಸಂಕ್ಷಿಪ್ತ ರೆಕಾರ್ಡಿಂಗ್ ಹೆಚ್ಚು ಅನುಕೂಲಕರವಾಗಿರುತ್ತದೆ, ಏಕೆಂದರೆ ಗೊಂದಲಕ್ಕೊಳಗಾಗುವುದು ಹೆಚ್ಚು ಕಷ್ಟ. ಫ್ರೇಮ್‌ಗಾಗಿ ನಮ್ಮ ಕೋಡ್ ಅನ್ನು ಪುನಃ ಕೆಲಸ ಮಾಡೋಣ:

ಹಿನ್ನೆಲೆ: url (https://goo.gl/tKyzHt) ಮಧ್ಯದ ಮೇಲ್ಭಾಗ / ಪುನರಾವರ್ತನೆ ಇಲ್ಲ, /* ಫ್ರೇಮ್‌ನ ಮೇಲ್ಭಾಗ */ url (https://goo.gl/SUKymM) ಮಧ್ಯದ ಕೆಳಭಾಗ / ಪುನರಾವರ್ತನೆ ಇಲ್ಲ, / * ಫ್ರೇಮ್‌ನ ಕೆಳಭಾಗ */ url(https://goo.gl/Km7HVV) ಮಧ್ಯದ ಮೇಲ್ಭಾಗ / ಪುನರಾವರ್ತಿತ-y ಅನ್ನು ಹೊಂದಿರುತ್ತದೆ; /* ಫ್ರೇಮ್ ಮಧ್ಯ */

ಈ ಆಯ್ಕೆಯು ಕಡಿಮೆ ತೊಡಕಾಗಿ ಕಾಣುತ್ತದೆ ಮತ್ತು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಸುಲಭವಾಗಿದೆ.

ಇಂದು ನಾವು ಹಿನ್ನೆಲೆ ಆಸ್ತಿ ಮತ್ತು ಅದರ ಹೆಚ್ಚುವರಿ ಮೌಲ್ಯಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಹೊಂದಿಸಲಾದ ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳ ಮೇಲೆ ಕೆಲಸ ಮಾಡುತ್ತೇವೆ. ಒಂದೆರಡು ಪರಿಗಣಿಸೋಣ ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳುಒಂದೇ ಅಂಶಕ್ಕೆ ಹಲವಾರು ಹಿನ್ನೆಲೆಗಳನ್ನು ಹೊಂದಿಸುವ ಅನುಷ್ಠಾನದಲ್ಲಿ.

ಇದು ಅನೇಕ ಸಂದರ್ಭಗಳಲ್ಲಿ ಮತ್ತು ಕ್ಷಣಗಳಲ್ಲಿ ಉಪಯುಕ್ತವಾಗಬಹುದು. ವಿಶೇಷವಾಗಿ ಈ ಸಂದರ್ಭದಲ್ಲಿ ಹುಸಿ ಅಂಶಗಳ ಬಳಕೆ, ಏಕೆಂದರೆ ಅವು ನಿಯತಾಂಕಗಳಲ್ಲಿ ಬಹಳ ಮೃದುವಾಗಿರುತ್ತದೆ.

ಸಾಕಷ್ಟು ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳು

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

Blockimg( ಹಿನ್ನೆಲೆ: url("img/img2.png"),/*ಮೇಲಿನ ಹಿನ್ನೆಲೆ ಮತ್ತು ನಂತರ ಅನುಕ್ರಮವಾಗಿ*/ url("img/img3.png"), url("img/img1.jpg"); ಹಿನ್ನೆಲೆ-ಸ್ಥಾನ : 370px ಕೇಂದ್ರ, 120px 150px, ಕೇಂದ್ರ ಕೇಂದ್ರ;/*ಚಿತ್ರಗಳ ಸ್ಥಾನ*/ ಹಿನ್ನೆಲೆ-ಪುನರಾವರ್ತನೆ: ಇಲ್ಲ-ಪುನರಾವರ್ತನೆ;/*ಪುನರಾವರ್ತಿತ ಚಿತ್ರ*/ ಹಿನ್ನೆಲೆ-ಬಣ್ಣ: #444;/*ಹಿನ್ನೆಲೆ ಬಣ್ಣ ಅಗತ್ಯವಿದ್ದರೆ*/ ಬಾಕ್ಸ್-ನೆರಳು: 0 1px 2px rgba (0, 0, 0, 0.1); 100px ಅಂಚು: 700px; 370px ಕೇಂದ್ರ, url ("img/img3.png") ಇಲ್ಲ-ಪುನರಾವರ್ತನೆ 120px 150px, url ("img/img1.jpg") ನೋ-ರಿಪೀಟ್ ಸೆಂಟರ್: 100px ಸ್ವಯಂ 15px; :700px;

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

ಮುಂದೆ ಸೂಚಿಸಲಾಗಿದೆ ಹೆಚ್ಚುವರಿ ಆಯ್ಕೆಗಳುಮೂಲಕ ವೈಯಕ್ತಿಕ ಗುಣಲಕ್ಷಣಗಳು: ಸ್ಥಾನ, ಪುನರಾವರ್ತನೆ, ಗಾತ್ರ, ಅಗತ್ಯವಿದ್ದರೆ, ನಂತರ ಬಣ್ಣ. ಚಿತ್ರದ ಸಂಖ್ಯೆಯಂತೆಯೇ ಎಲ್ಲಾ ನಿಯತಾಂಕಗಳನ್ನು ಅಲ್ಪವಿರಾಮದಿಂದ ಪ್ರತ್ಯೇಕಿಸಿ ಬರೆಯಲಾಗಿದೆ ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ಗಮನಿಸಿ.

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

ಹುಸಿ ಅಂಶದ ಮೂಲಕ ಹಿನ್ನೆಲೆ ಚಿತ್ರ

ಅಲ್ಲದೆ ಬಗ್ಗೆ ಮರೆಯಬೇಡಿ ಪರ್ಯಾಯ ಆಯ್ಕೆಗಳುಅದರಂತೆ ಮೊದಲು ಮತ್ತು ನಂತರದ ಹುಸಿ ಅಂಶಗಳು. ಅವರ ಬಳಕೆಯಲ್ಲಿ ಧನಾತ್ಮಕ ಪ್ರಯೋಜನವಿದೆ - ಚಿತ್ರವನ್ನು ಅಂಶದ ಅಂಚಿಗೆ ಮೀರಿ ಚಲಿಸಬಹುದು, ಆದ್ದರಿಂದ ಅದು ಗಡಿಯಲ್ಲಿ ಕಣ್ಮರೆಯಾಗುವುದಿಲ್ಲ, ಆದರೆ ಅದರ ಮೇಲಿರುತ್ತದೆ. ನೀವು 3D ಪರಿಣಾಮದಂತಹದನ್ನು ರಚಿಸಬೇಕಾದರೆ ಈ ತಂತ್ರವು ಸೂಕ್ತವಾಗಿ ಬರುತ್ತದೆ.

Blockimg(ಹಿನ್ನೆಲೆ: url("img/img1.jpg") ಪುನರಾವರ್ತನೆ ಇಲ್ಲ;/*ಎಲಿಮೆಂಟ್ ಹಿನ್ನೆಲೆ*/ಸ್ಥಾನ:ಸಂಬಂಧಿ;/*ಸ್ಥಾನೀಕರಣ ಪ್ರದೇಶ*/ ಅಂಚು: 200px ಸ್ವಯಂ 15px; ಬಾಕ್ಸ್-ಗಾತ್ರ: ಗಡಿ-ಪೆಟ್ಟಿಗೆ; ಪ್ಯಾಡಿಂಗ್: 25px; ಅಗಲ: 700px; 300px; ಎಡ: 0; ಸ್ಥಾನ: ಸಂಪೂರ್ಣ;/* ಸಂಪೂರ್ಣ ಸ್ಥಾನ: 0;

ವಿವರಣೆ.ವಾಸ್ತವವಾಗಿ, ಎಲ್ಲವೂ ತುಂಬಾ ಸರಳವಾಗಿದೆ. ಮುಖ್ಯ ಅಂಶ ಸಾಮಾನ್ಯ ರೀತಿಯಲ್ಲಿಹಿನ್ನೆಲೆ ಹೊಂದಿಸಿ. ಮುಂದೆ ಕೀ ಬರುತ್ತದೆ ಸ್ಥಾನದ ಆಸ್ತಿ: ಸಂಬಂಧಿ; , ಇದು ಮುಖ್ಯ ಅಂಶದಲ್ಲಿರುವ ಮತ್ತು ಆಸ್ತಿ ಸ್ಥಾನವನ್ನು ಹೊಂದಿರುವ ಮತ್ತೊಂದು ಅಂಶವನ್ನು ಚಲಿಸುವ ಪ್ರದೇಶವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ: ಸಂಪೂರ್ಣ; .

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