Javascript-форум - Показать сообщение отдельно - Добавление background-X

madeas · #22 (**permalink**) 01.08.2018, 16:59

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
      }

      ul li {
        list-style: none;
        display: inline-block;
      }

      .back_style {
        font-size: 16px;
      }

      #back {
        width: 267px;
        height: 267px;
        background-color: rgb(0, 0, 0);
        display: flex;
        position: relative;
      }

      .d-flex {
        display: flex;
        margin-bottom: 1rem;
      }

      .space-around {
        justify-content: space-around;
      }

      .flex-column {
        flex-direction: column;
      }

    </style>

    <body>

      <div class='d-flex'>
        <p>background-image:</p>
        <ul>
          <li>url(<input type='text' id='bgImage' value="https://javascript.ru/cat/list/donkey.gif">);</li>
        </ul>
      </div>

      <div class='d-flex space-around'>
        <div class='mr-2'>
          <h5>background-repeat:</h5>
          <ul class='d-flex flex-column'>
            <li><input type='radio' name='repeat' id='norep' checked><label for='norep'>no-repeat</label></li>
            <li><input type='radio' name='repeat' id='repXY'><label for='repXY'>repeat</label></li>
            <li><input type='radio' name='repeat' id='repX'><label for='repX'>repeat-x</label></li>
            <li><input type='radio' name='repeat' id='repY'><label for='repY'>repeat-y</label></li>
          </ul>
        </div>
        <div class='mx-2'>
          <h5>background-size:</h5>
          <ul class='d-flex flex-column'>
            <li><label id='bnoradio'><input type='number' id='sizeIn' value='150' name='size' class='adstl bsize'> px</label></li>
            <li class='bsckeck'><input type='checkbox' id='sizeOne' name='size'><label for='sizeOne'>cover</label></li>
            <li class='bsckeck'><input type='checkbox' id='sizeTwo' name='size'><label for='sizeTwo'>contain</label></li>
          </ul>
        </div>
        <div class='ml-2'>
          <h5>background-position:</h5>
          <ul class='d-flex flex-column'>
            <li>Left: <label><input id='posX' type='number' min='0' max='100' value='50' class='adstl bsize'> %</label></li>
            <li>Top: <label><input id='posY' type='number' min='0' max='100' value='70' class='adstl bsize'> %</label></li>
          </ul>
        </div>
      </div>

      <div id='back'></div>

      <script>
        var back = document.querySelector("#back"),
          x = document.querySelector("#posX"),
          y = document.querySelector('#posY'),
          so = document.querySelector('#sizeOne'),
          st = document.querySelector('#sizeTwo'),
          si = document.querySelector('#sizeIn');
        (style = () => {
          back.style.background = `url(${document.querySelector("#bgImage").value}) black ${document.querySelector('[name="repeat"]:checked').parentNode.textContent} ${x.value}% ${y.value}%`;
          back.style.backgroundSize = so.checked ? 'cover' : st.checked ? 'contain' : si.value + 'px';
        })();
        document.querySelectorAll('input').forEach(el => el.oninput = style);

      </script>
    </body>
  </head>

</html>

Получилось))
Я слегка подкорректировал, в принципе и так нормально, но такие тонкости не все поймут, психанут и закроют страничку)