NickAndNick

Позиционирование: background

Dec 2nd, 2020 (edited)
845
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!doctype html>
  2. <html lang="ru">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Документ</title>
  6.     <style>
  7.         .box {
  8.             display: flex;
  9.             flex-wrap: nowrap;
  10.             flex-direction: row;
  11.         }
  12.         .item {
  13.             width: 200px;
  14.             height: 200px;
  15.             margin: 5px;
  16.             border-radius: 10px;
  17.             background: url(https://otvet.imgsmail.ru/download/68900022_3a80dfddb0f00e458b2e235ed4834457_800.png) no-repeat;
  18.         }
  19.         #one {
  20.             background-position: 0 -6px;
  21.         }
  22.         #two {
  23.             background-position: -200px -6px;
  24.         }
  25.         #three {
  26.             background-position: -400px -6px;
  27.         }
  28.         #four {
  29.             background-position: -600px -6px;
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34.     <div class="box">
  35.         <div class="item" id="one"></div>
  36.         <div class="item" id="two"></div>
  37.         <div class="item" id="three"></div>
  38.         <div class="item" id="four"></div>
  39.     </div>
  40. </body>
  41. </html>
RAW Paste Data