| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| div { |
| width: 100px; |
| height: 100px; |
| border: dashed black 1px; |
| display: inline-block; |
| } |
| |
| :root { |
| --transparent-1: rgba(0, 0, 255, 0); |
| --transparent-2: rgba(255, 0, 0, 0); |
| --transparent-3: rgba(0, 255, 0, 0); |
| --transparent-4: rgba(255, 255, 0, 0); |
| |
| --opaque-1: rgba(0, 0, 255, 1); |
| --opaque-2: rgba(255, 0, 0, 1); |
| --opaque-3: rgba(0, 255, 0, 1); |
| --opaque-4: rgba(255, 255, 0, 1); |
| |
| --partial-1: rgba(0, 0, 255, 0.5); |
| --partial-2: rgba(255, 0, 0, 0.5); |
| --partial-3: rgba(0, 255, 0, 0.5); |
| --partial-4: rgba(255, 255, 0, 0.5); |
| } |
| |
| #opaque-opaque { |
| background-image: linear-gradient(var(--opaque-1), var(--opaque-2)); |
| } |
| |
| #partial-partial { |
| background-image: linear-gradient(var(--partial-1), var(--partial-2)); |
| } |
| |
| #transparent-transparent { |
| background-image: linear-gradient(var(--transparent-1), var(--transparent-2)); |
| } |
| |
| #transparent-opaque { |
| background-image: linear-gradient(var(--transparent-1), var(--opaque-2)); |
| } |
| |
| #transparent-partial { |
| background-image: linear-gradient(var(--transparent-1), var(--partial-2)); |
| } |
| |
| #opaque-transparent { |
| background-image: linear-gradient(var(--opaque-1), var(--transparent-2)); |
| } |
| |
| #partial-transparent { |
| background-image: linear-gradient(var(--partial-1), var(--transparent-2)); |
| } |
| |
| #opaque-transparent-opaque { |
| background-image: linear-gradient(var(--opaque-1), var(--transparent-2), var(--opaque-3)); |
| } |
| |
| #opaque-transparent-partial { |
| background-image: linear-gradient(var(--opaque-1), var(--transparent-2), var(--partial-3)); |
| } |
| |
| #partial-transparent-partial { |
| background-image: linear-gradient(var(--partial-1), var(--transparent-2), var(--partial-3)); |
| } |
| |
| #partial-transparent-opaque { |
| background-image: linear-gradient(var(--partial-1), var(--transparent-2), var(--opaque-3)); |
| } |
| |
| #opaque-transparent-transparent-opaque { |
| background-image: linear-gradient(var(--opaque-1), var(--transparent-2), var(--transparent-3), var(--opaque-4)); |
| } |
| |
| #opaque-transparent-transparent-partial { |
| background-image: linear-gradient(var(--opaque-1), var(--transparent-2), var(--transparent-3), var(--partial-4)); |
| } |
| |
| #partial-transparent-transparent-partial { |
| background-image: linear-gradient(var(--partial-1), var(--transparent-2), var(--transparent-3), var(--partial-4)); |
| } |
| |
| #partial-transparent-transparent-opaque { |
| background-image: linear-gradient(var(--partial-1), var(--transparent-2), var(--transparent-3), var(--opaque-4)); |
| } |
| |
| #opaque-transparent-transparent-transparent-opaque { |
| background-image: linear-gradient(var(--opaque-1), var(--transparent-2), var(--transparent-3), var(--transparent-4), var(--opaque-2)); |
| } |
| |
| #opaque-transparent-transparent-transparent-partial { |
| background-image: linear-gradient(var(--opaque-1), var(--transparent-2), var(--transparent-3), var(--transparent-4), var(--partial-2)); |
| } |
| |
| #partial-transparent-transparent-transparent-partial { |
| background-image: linear-gradient(var(--partial-1), var(--transparent-2), var(--transparent-3), var(--transparent-4), var(--partial-2)); |
| } |
| |
| #partial-transparent-transparent-transparent-opaque { |
| background-image: linear-gradient(var(--partial-1), var(--transparent-2), var(--transparent-3), var(--transparent-4), var(--opaque-2)); |
| } |
| |
| #opaque-transparent-transparent { |
| background-image: linear-gradient(var(--opaque-1), var(--transparent-2), var(--transparent-3)); |
| } |
| |
| #partial-transparent-transparent { |
| background-image: linear-gradient(var(--partial-1), var(--transparent-2), var(--transparent-3)); |
| } |
| |
| #transparent-transparent-opaque { |
| background-image: linear-gradient(var(--transparent-1), var(--transparent-2), var(--opaque-3)); |
| } |
| |
| #transparent-transparent-partial { |
| background-image: linear-gradient(var(--transparent-1), var(--transparent-2), var(--partial-3)); |
| } |
| |
| #transparent-transparent-transparent { |
| background-image: linear-gradient(var(--transparent-1), var(--transparent-2), var(--transparent-3)); |
| } |
| |
| #transparent-opaque-transparent { |
| background-image: linear-gradient(var(--transparent-1), var(--opaque-2), var(--transparent-3)); |
| } |
| #transparent-partial-transparent { |
| background-image: linear-gradient(var(--transparent-1), var(--partial-2), var(--transparent-3)); |
| } |
| |
| </style> |
| </head> |
| <body> |
| <div id="opaque-opaque"></div> |
| <div id="partial-partial"></div> |
| <div id="transparent-transparent"></div> |
| <div id="transparent-opaque"></div> |
| <div id="transparent-partial"></div> |
| <div id="opaque-transparent"></div> |
| <div id="partial-transparent"></div> |
| <div id="opaque-transparent-opaque"></div> |
| <div id="opaque-transparent-partial"></div> |
| <div id="partial-transparent-partial"></div> |
| <div id="partial-transparent-opaque"></div> |
| <div id="opaque-transparent-transparent-opaque"></div> |
| <div id="opaque-transparent-transparent-partial"></div> |
| <div id="partial-transparent-transparent-partial"></div> |
| <div id="partial-transparent-transparent-opaque"></div> |
| <div id="opaque-transparent-transparent-transparent-opaque"></div> |
| <div id="opaque-transparent-transparent-transparent-partial"></div> |
| <div id="partial-transparent-transparent-transparent-partial"></div> |
| <div id="partial-transparent-transparent-transparent-opaque"></div> |
| <div id="opaque-transparent-transparent"></div> |
| <div id="partial-transparent-transparent"></div> |
| <div id="transparent-transparent-opaque"></div> |
| <div id="transparent-transparent-partial"></div> |
| <div id="transparent-transparent-transparent"></div> |
| <div id="transparent-opaque-transparent"></div> |
| <div id="transparent-partial-transparent"></div> |
| </body> |
| </html> |
