| <html> |
| <head> |
| <style> |
| .inline-block { |
| display: inline-block; |
| margin: 10px; |
| } |
| .fixed-container { |
| height: 80px; |
| width: 80px; |
| } |
| .square-background-two-layer { |
| background-color: yellow; |
| background-image: url('resources/svg-100x100-intrinsic.svg'), none; |
| background-size: 100% 100%, auto; |
| } |
| .with-padding { |
| background-size: 100% 100%, auto; |
| background-clip: content-box, border-box; |
| background-origin: content-box, padding-box; |
| padding: 20px; |
| } |
| .green-bg { |
| background-color: green; |
| } |
| .lime-border { |
| border: 20px solid lime; |
| background-color: green; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="inline-block fixed-container square-background-two-layer"></div> |
| <div class="inline-block fixed-container square-background-two-layer with-padding"></div> |
| <div class="inline-block fixed-container green-bg"></div> |
| <div class="inline-block fixed-container green-bg lime-border"></div> |
| <br> |
| <div class="inline-block fixed-container square-background-two-layer"></div> |
| <div class="inline-block fixed-container square-background-two-layer with-padding"></div> |
| <div class="inline-block fixed-container green-bg"></div> |
| <div class="inline-block fixed-container green-bg lime-border"></div> |
| <br> |
| <div class="inline-block fixed-container square-background-two-layer"></div> |
| <div class="inline-block fixed-container square-background-two-layer with-padding"></div> |
| <div class="inline-block fixed-container green-bg"></div> |
| <div class="inline-block fixed-container green-bg lime-border"></div> |
| </body> |
| </html> |
