如何單擊圖像使其成為我的頁面背景？

Question

所以，簡而言之，我對其中的大部分內容都有點陌生。 我需要做的是制作一個包含四個不同圖像的面板。 我已經這樣做了，現在我需要制作它以便我單擊的任何圖像都將成為頁面的背景。 如果我對此解釋得不好，我很抱歉，但是有人知道我將如何在 javascript 中對此進行編碼嗎？ 如果你能幫助我，我將不勝感激。

Answer 1

將圖像的來源分配給文檔主體的 background-image 屬性。

 // Attach an event listener to the container, and // add a listener to it that calls the `handleClick` function. const images = document.querySelector('.images'); images.addEventListener('click', handleClick, false); // Check to see if the element ciicked on is an // image, and then assign the image src to the // background-image property of the document body function handleClick(e) { if (e.target.matches('img')) { const { src } = e.target; document.body.style.backgroundImage = `url(${src})`; } }

 body { background-size: cover; background-repeat: no-repeat; } img:hover { cursor: pointer; }

 <div class="images"> <img src="https://dummyimage.com/75x75/000/fff&text=1" /> <img src="https://dummyimage.com/75x75/575/fff&text=2" /> <img src="https://dummyimage.com/75x75/a8d/fff&text=3" /> <img src="https://dummyimage.com/75x75/bbc/fff&text=4" /> </div>

附加文件

Answer 2

這不是最好的解決方案，但我認為它可以幫助你

    <html>
    <body>
    /*You can make img click able and onclick like button*/
    <img src="this is picture path" onclick="function">
    <script>
    /* Function change background*/
    function function() {
    /* Command js and picture path inside 'this' and url with css command inside "this" actually just copy the code, no-repeat right top just a some css setting */
      document.body.style.background = "url('img_tree.png') no-repeat right top";
/* You see "body" tag right? It change body background*/
    }
    </script>
    
    </body>
    </html>

如何單擊圖像使其成為我的頁面背景？

問題描述

2 個解決方案

解決方案1
1 2022-05-04 17:25:21

解決方案2
0 2022-05-04 17:24:17

如何單擊圖像使其成為我的頁面背景？

問題描述

2 個解決方案

解決方案1 1 2022-05-04 17:25:21

解決方案2 0 2022-05-04 17:24:17

解決方案1
1 2022-05-04 17:25:21

解決方案2
0 2022-05-04 17:24:17