Блог

Главная - Вопросы по программированию - Как я могу создать изображение на заднем плане из 4 элементов div с помощью javascript?

Как я могу создать изображение на заднем плане из 4 элементов div с помощью javascript?

#javascript #html #css

Вопрос:

Я хочу иметь изображение высотой 45 пикселей и шириной (45*4)пикселей в качестве фона из 4 элементов div. Все эти элементы div представляют собой квадраты размером 45 пикселей. Моя идея состояла в том, чтобы придать каждому div-фону четвертую часть изображения. Я пытаюсь получить желаемый эффект, используя фоновое положение элементов div, как это показано в коде. К сожалению, результат показывает 4 части изображения в случайном порядке, а не в последовательном порядке. Вот код:

 <html>
    <head>
        <meta charset="utf-8">
        <script>

            function begin(){

                var caselle = document.getElementsByTagName('div');

                for (i=0; i<4; i  ){
                    caselle[i].style.display="inline-block";
                    caselle[i].style.height="45px";
                    caselle[i].style.width="45px";
                    caselle[i].textContent=" ";
                    caselle[i].style.backgroundImage="url(corazzata.jpg)";
                    caselle[i].style.backgroundSize="180px 45px";
                    caselle[i].style.backgroundPosition=(i*45) "px 45px";
                }
            }
        </script>
    </head>
    <body onload="begin()">
        <div id="1"></div>
        <div id="2"></div>
        <div id="3"></div>
        <div id="4"></div>
        <div id="5"></div>
        <img id="barca1" src="corazzata.jpg">
    </body>
</html>```

Комментарии:

1. Вы пробовали установить изображение в качестве фона для родительского раздела и иметь эти разделы внутри без фона?

Ответ №1:

Вы пробовали установить изображение в качестве фона для родительского раздела и иметь эти разделы внутри без фона?

Вот пример https://jsfiddle.net/mr_bobz/6zyw3j2d/

 <html>
    <head>
        <meta charset="utf-8">       
    </head>
    <body >
      <div style="background-color: yellow; background-image: url('https://media.istockphoto.com/photos/colored-powder-explosion-on-black-background-picture-id1140180560?k=20amp;m=1140180560amp;s=612x612amp;w=0amp;h=X_400OQDFQGqccORnKt2PHYvTZ3dBLeEnCH_hRiUQrY=');  height: 250px; background-repeat: no-repeat;">
        <div style='height: 50px; color: white' id="1">DIV 1</div>
        <div style='height: 50px; color: white' id="2">DIV 2</div>
        <div style='height: 50px; color: white' id="3">DIV 3</div>
        <div style='height: 50px; color: white' id="4">DIV 4</div>
        <div style='height: 50px; color: white' id="5">DIV 5</div>
      </div>       
    </body>
</html>
Метки: