css_opacity.html 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. <!DOCTYPE html
  2. PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <head>
  6. <style>
  7. div {
  8. border: 2px solid #000;
  9. width: 50px;
  10. height: 50px;
  11. margin: 10px;
  12. background: green;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <h1>Nested block elements</h1>
  18. <div style="opacity: 0.8;">
  19. <div style="opacity: 0.8;">
  20. <div style="opacity: 0.8;">
  21. <div style="opacity: 0.8;">
  22. <div style="opacity: 0.8;">
  23. <div style="opacity: 0.8;">
  24. <div style="opacity: 0.8;">
  25. <div style="opacity: 0.8;">
  26. <div style="opacity: 0.8;">
  27. <div style="opacity: 0.8;">
  28. <div style="opacity: 0.8;">
  29. <div style="opacity: 0.8;">
  30. </div>
  31. </div>
  32. </div>
  33. </div>
  34. </div>
  35. </div>
  36. </div>
  37. </div>
  38. </div>
  39. </div>
  40. </div>
  41. </div>
  42. <br />
  43. <br />
  44. <br />
  45. <br />
  46. <br />
  47. <br />
  48. <br />
  49. <br />
  50. <br />
  51. <h1>Inline elements</h1>
  52. <span style="width: 100%;">
  53. <span style="opacity: 0.1">ab</span>
  54. <span style="opacity: 0.2">cb</span>
  55. <span style="opacity: 0.3">ef</span>
  56. <span style="opacity: 0.4">gh</span>
  57. <span style="opacity: 0.5">ij</span>
  58. <span style="opacity: 0.6">kl</span>
  59. <span style="opacity: 0.7">mn</span>
  60. <span style="opacity: 0.8">op</span>
  61. <span style="opacity: 0.9">qr</span>
  62. <span style="opacity: 1.0">st</span>
  63. </span>
  64. <br/>
  65. <span style="width: 100%; opacity: 0.5;">
  66. <span style="opacity: 0.1">ab</span>
  67. <span style="opacity: 0.2">cb</span>
  68. <span style="opacity: 0.3">ef</span>
  69. <span style="opacity: 0.4">gh</span>
  70. <span style="opacity: 0.5">ij</span>
  71. <span style="opacity: 0.6">kl</span>
  72. <span style="opacity: 0.7">mn</span>
  73. <span style="opacity: 0.8">op</span>
  74. <span style="opacity: 0.9">qr</span>
  75. <span style="opacity: 1.0">st</span>
  76. </span>
  77. <div style="opacity: 0.1;">0.1</div>
  78. <div style="opacity: 0.2;">0.2</div>
  79. <div style="opacity: 0.3;">0.3</div>
  80. <div style="opacity: 0.4;">0.4</div>
  81. <div style="opacity: 0.5;">0.5</div>
  82. <div style="opacity: 0.6;">0.6</div>
  83. <div style="opacity: 0.7;">0.7</div>
  84. <div style="opacity: 0.8;">0.8</div>
  85. <div style="opacity: 0.9;">0.9</div>
  86. <div style="opacity: 1.0;">1.0</div>
  87. <div style="opacity: 1.0;">1.0 opacity</div>
  88. <div>No opacity</div>
  89. <div style="opacity: 0.5; height: auto;">
  90. <div style="opacity: 0.5;">
  91. <div style="opacity: 1.0;"></div>
  92. <div style="opacity: 0.5;"></div>
  93. </div>
  94. <div style="opacity: 0.5;"></div>
  95. </div>
  96. </body> </html>