CSS3 ಅಪಾರದರ್ಶಕತೆ ಬಗ್ಗೆ ತಿಳಿಯಿರಿ

ನಿಮ್ಮ ಹಿನ್ನೆಲೆಗಳನ್ನು ಪಾರದರ್ಶಕವಾಗಿ ಮಾಡುವುದು

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

ಅಪಾರದರ್ಶಕತೆ ಆಸ್ತಿ ಬಳಸಿ ಹೇಗೆ

ಅಪಾರದರ್ಶಕತೆ ಆಸ್ತಿ 0.0 ರಿಂದ 1.0 ರವರೆಗೆ ಪಾರದರ್ಶಕತೆ ಪ್ರಮಾಣವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ.

0.0 ಆಗಿದೆ 100% ಪಾರದರ್ಶಕ-ಆ ಅಂಶ ಕೆಳಗೆ ಏನು ಸಂಪೂರ್ಣವಾಗಿ ಮೂಲಕ ತೋರಿಸುತ್ತದೆ. 1.0 ಅಂಶವು 100% ಅಪಾರದರ್ಶಕ-ಅಂಶಕ್ಕಿಂತ ಕೆಳಗಿರುವ ಏನನ್ನಾದರೂ ತೋರಿಸುತ್ತದೆ.

ಆದ್ದರಿಂದ 50% ಪಾರದರ್ಶಕಕ್ಕೆ ಒಂದು ಅಂಶವನ್ನು ಹೊಂದಿಸಲು, ನೀವು ಬರೆಯಬಹುದು:

ಅಪಾರದರ್ಶಕತೆ: 0.5;

ಕ್ರಿಯೆಯಲ್ಲಿ ಅಪಾರದರ್ಶಕತೆ ಕೆಲವು ಉದಾಹರಣೆಗಳನ್ನು ನೋಡಿ

ಹಳೆಯ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸಲು ಖಚಿತವಾಗಿರಿ

ಐಇ 6 ಅಥವಾ 7 ಅನ್ನು CSS3 ಅಪಾರದರ್ಶಕತೆ ಆಸ್ತಿಗೆ ಬೆಂಬಲಿಸುವುದಿಲ್ಲ. ಆದರೆ ನಿಮಗೆ ಅದೃಷ್ಟ ಇಲ್ಲ. ಬದಲಿಗೆ, IE ಮೈಕ್ರೋಸಾಫ್ಟ್-ಮಾತ್ರ ಆಸ್ತಿ ಆಲ್ಫಾ ಫಿಲ್ಟರ್ ಅನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ. ಐಇನಲ್ಲಿನ ಆಲ್ಫಾ ಫಿಲ್ಟರ್ಗಳು 0 (ಸಂಪೂರ್ಣವಾಗಿ ಪಾರದರ್ಶಕ) ನಿಂದ 100 ಗೆ ಮೌಲ್ಯಗಳನ್ನು ಸ್ವೀಕರಿಸಲು (ಸಂಪೂರ್ಣವಾಗಿ ಅಪಾರದರ್ಶಕ). ಆದ್ದರಿಂದ, ಐಇದಲ್ಲಿ ನಿಮ್ಮ ಪಾರದರ್ಶಕತೆ ಪಡೆಯಲು, ನೀವು ನಿಮ್ಮ ಅಪಾರದರ್ಶಕತೆ 100 ರಿಂದ ಗುಣಿಸಬೇಕಾಗುತ್ತದೆ ಮತ್ತು ನಿಮ್ಮ ಶೈಲಿಗಳಿಗೆ ಆಲ್ಫಾ ಫಿಲ್ಟರ್ ಅನ್ನು ಸೇರಿಸಬೇಕು:

ಫಿಲ್ಟರ್: ಆಲ್ಫಾ (ಅಪಾರದರ್ಶಕತೆ = 50);

ಆಲ್ಫಾ ಫಿಲ್ಟರ್ ಕ್ರಿಯೆಯಲ್ಲಿ ನೋಡಿ (ಐಇ ಮಾತ್ರ)

ಮತ್ತು ಬ್ರೌಸರ್ ಪೂರ್ವಪ್ರತ್ಯಯಗಳನ್ನು ಬಳಸಿ

ನೀವು -moz- ಮತ್ತು -webkit- ಪೂರ್ವಪ್ರತ್ಯಯಗಳನ್ನು ಬಳಸಬೇಕು, ಇದರಿಂದಾಗಿ ಮೊಜಿಲ್ಲಾ ಮತ್ತು ವೆಬ್ಕಿಟ್ ಬ್ರೌಸರ್ಗಳ ಹಳೆಯ ಆವೃತ್ತಿಗಳು ಸಹ ಅದನ್ನು ಬೆಂಬಲಿಸುತ್ತವೆ:

-ವೆಬ್ಕಿಟ್-ಅಪಾರದರ್ಶಕತೆ: 0.5;
-moz- ಅಪಾರದರ್ಶಕತೆ: 0.5;
ಅಪಾರದರ್ಶಕತೆ: 0.5;

ಯಾವಾಗಲೂ ಮೊದಲು ಬ್ರೌಸರ್ ಪೂರ್ವಪ್ರತ್ಯಯಗಳನ್ನು ಇರಿಸಿ, ಮತ್ತು ಮಾನ್ಯವಾದ CSS3 ಗುಣಲಕ್ಷಣವು ಕೊನೆಯದಾಗಿರುತ್ತದೆ.

ಹಳೆಯ ಮೊಜಿಲ್ಲಾ ಮತ್ತು ವೆಬ್ಕಿಟ್ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಬ್ರೌಸರ್ ಪೂರ್ವಪ್ರತ್ಯಯಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ.

ನೀವು ಇಮೇಜ್ಗಳನ್ನು ಪಾರದರ್ಶಕ ಟೂ ಮಾಡಬಹುದು

ಚಿತ್ರದ ಮೇಲೆ ಅಪಾರದರ್ಶಕತೆ ಹೊಂದಿಸಿ ಮತ್ತು ಅದು ಹಿನ್ನೆಲೆಗೆ ಮಸುಕಾಗುತ್ತದೆ. ಇದು ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳಿಗೆ ನಿಜವಾಗಿಯೂ ಉಪಯುಕ್ತವಾಗಿದೆ.

ಮತ್ತು ನೀವು ಆಧಾರ ಟ್ಯಾಗ್ನಲ್ಲಿ ಸೇರಿಸಿದರೆ ನೀವು ಚಿತ್ರದ ಅಪಾರದರ್ಶಕತೆ ಬದಲಿಸುವ ಮೂಲಕ ಹೂವರ್ ಪರಿಣಾಮಗಳನ್ನು ರಚಿಸಬಹುದು.

a: ಹೂವರ್ img {
ಫಿಲ್ಟರ್: ಆಲ್ಫಾ (ಅಪಾರದರ್ಶಕತೆ = 50)
ಫಿಲ್ಟರ್: ಪ್ರೊಜಿಡ್: DXImageTransform.Microsoft.Alpha (ಅಪಾರದರ್ಶಕತೆ = 50)
-moz- ಅಪಾರದರ್ಶಕತೆ: 0.5;
-ವೆಬ್ಕಿಟ್-ಅಪಾರದರ್ಶಕತೆ: 0.5;
ಅಪಾರದರ್ಶಕತೆ: 0.5;
}

ಈ HTML ಅನ್ನು ಪರಿಣಾಮ ಬೀರುತ್ತದೆ:

ಮೇಲಿನ ಶೈಲಿಗಳು ಮತ್ತು HTML ಅನ್ನು ಕ್ರಿಯೆಯಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ.

ನಿಮ್ಮ ಚಿತ್ರಗಳ ಮೇಲೆ ಪಠ್ಯ ಹಾಕಿ

ಅಪಾರದರ್ಶಕತೆ, ನೀವು ಚಿತ್ರದ ಮೇಲೆ ಪಠ್ಯವನ್ನು ಇರಿಸಬಹುದು ಮತ್ತು ಆ ಪಠ್ಯವು ಎಲ್ಲಿ ಹೊರಹೊಮ್ಮಲು ಗೋಚರಿಸುತ್ತದೆ.

ಈ ವಿಧಾನವು ಸ್ವಲ್ಪ ಟ್ರಿಕಿಯಾಗಿದೆ, ಏಕೆಂದರೆ ನೀವು ಕೇವಲ ಚಿತ್ರವನ್ನು ಮಸುಕಾಗಲು ಸಾಧ್ಯವಿಲ್ಲ, ಏಕೆಂದರೆ ಅದು ಇಡೀ ಚಿತ್ರವನ್ನು ಕಳೆದುಕೊಳ್ಳುತ್ತದೆ. ಮತ್ತು ಪಠ್ಯ ಪೆಟ್ಟಿಗೆಯನ್ನು ನೀವು ಮಾಯವಾಗುವುದಿಲ್ಲ, ಏಕೆಂದರೆ ಪಠ್ಯವು ಅಲ್ಲಿಯೂ ಸಹ ಮಸುಕಾಗುತ್ತದೆ.

1. ಮೊದಲು ನೀವು ಕಂಟೇನರ್ DIV ಅನ್ನು ರಚಿಸಿ ಮತ್ತು ಒಳಗೆ ನಿಮ್ಮ ಚಿತ್ರವನ್ನು ಇರಿಸಿ:

   
   

2. ಖಾಲಿ DIV ಯೊಂದಿಗೆ ಚಿತ್ರವನ್ನು ಅನುಸರಿಸಿ - ಇದು ನೀವು ಪಾರದರ್ಶಕವಾಗಿಸುವಿರಿ.

   
   
   

3. ನಿಮ್ಮ HTML ನಲ್ಲಿ ನೀವು ಸೇರಿಸಿರುವ ಕೊನೆಯ ವಿಷಯವು DIV ನಿಮ್ಮ ಪಠ್ಯದೊಂದಿಗೆ ಇದೆ:

   
   
   
   ಇದು ನನ್ನ ನಾಯಿ ಶಾಸ್ತಾ. ಅವನು ಮುದ್ದಾದ ಅಲ್ಲವೇ!

4. ಚಿತ್ರದ ಮೇಲೆ ಪಠ್ಯವನ್ನು ಇರಿಸಲು CSS ಸ್ಥಾನೀಕರಣದೊಂದಿಗೆ ನೀವು ಅದನ್ನು ಶೈಲಿಯಲ್ಲಿರಿಸಿಕೊಳ್ಳಿ. ನಾನು ಎಡಭಾಗದಲ್ಲಿ ನನ್ನ ಪಠ್ಯವನ್ನು ಇರಿಸಿದ್ದೇನೆ, ಆದರೆ ನೀವು ಅದನ್ನು ಎಡಕ್ಕೆ ಬದಲಿಸುವ ಮೂಲಕ ಬಲಕ್ಕೆ ಇಡಬಹುದು: 0; ಗುಣಲಕ್ಷಣಗಳಿಂದ ಬಲಕ್ಕೆ: 0; .

   # ಚಿತ್ರ {
   ಸ್ಥಾನ: ಸಂಬಂಧಿ;
   ಅಗಲ: 170px;
   ಎತ್ತರ: 128 px;
   ಅಂಚು: 0;
   }
   #text {
   ಸ್ಥಾನ: ಸಂಪೂರ್ಣ;
   ಅಗ್ರ: 0;
   ಎಡ: 0;
   ಅಗಲ: 60 px;
   ಎತ್ತರ: 118px;
   ಹಿನ್ನೆಲೆ: #fff;
   ಪ್ಯಾಡಿಂಗ್: 5 px;
   }
   #text {
   ಫಿಲ್ಟರ್: ಆಲ್ಫಾ (ಅಪಾರದರ್ಶಕತೆ = 70);
   ಶೋಧಕ: ಪ್ರೊಜಿಡ್: DXImageTransform.Microsoft.Alpha (ಅಪಾರದರ್ಶಕತೆ = 70);
   -moz- ಅಪಾರದರ್ಶಕತೆ: 0.70;
   ಅಪಾರದರ್ಶಕತೆ: 0.7;
   }
   #ಪದಗಳು {
   ಸ್ಥಾನ: ಸಂಪೂರ್ಣ;
   ಅಗ್ರ: 0;
   ಎಡ: 0;
   ಅಗಲ: 60 px;
   ಎತ್ತರ: 118px;
   ಹಿನ್ನೆಲೆ: ಪಾರದರ್ಶಕ;
   ಪ್ಯಾಡಿಂಗ್: 5 px;
   }

ಅದು ಹೇಗೆ ಕಾಣುತ್ತದೆ ಎಂದು ನೋಡಿ