image-orientation-background-position-ref.html (1087B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Images Module Level 3: image-orientation with background positions reference</title> 6 <link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> 7 <link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> 8 <style> 9 .exif-2 { 10 position: absolute; 11 top: 10px; 12 left: 10px; 13 width: 50px; 14 height: 50PX; 15 background-color: grey; 16 background-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg); 17 background-repeat: no-repeat; 18 background-position: -30px -20px; 19 } 20 21 .exif-6 { 22 position: absolute; 23 top: 10px; 24 left: 70px; 25 width: 50px; 26 height: 50PX; 27 background-color: grey; 28 background-image: url(../support/exif-orientation-6-ru-pre-rotated.jpg); 29 background-repeat: no-repeat; 30 background-position: -20px -30px; 31 } 32 33 </style> 34 </head> 35 <body> 36 <div class="exif-2"> 37 </div> 38 <div class="exif-6"> 39 </div> 40 </body> 41 </html>