问题描述
我正在构建一个数字海报编辑器，因此我需要帮助将图像设置为 div 的背景外观。 我不知道从哪里开始
我创建了一个带有几个图像的 div 可供选择，一个空的 div 只有一个 div id。
这是我的图像div：
<div id="imgopt">
<ol>
<li>
<img src="asset/img/template1.jpg">
</li>
<li>
<img src="asset/img/template2.jpg">
</li>
<li>
<img src="asset/img/template3.jpg">
</li>
<li>
<img src="asset/img/template4.jpg">
</li>
</ol>
</div>
这是我的空 Div：
<div id="designPoster">
</div>
基本我需要帮助编写 js 代码或一些关于如何通过从div[id="imgopt"]选择图像来实现设置空div[id="designPoster"]背景图像的功能的div[id="imgopt"] .
1楼
如果您想在没有 jQuery 的情况下使用 Javascript 做到这一点，这里是您实现它的方法。 请注意，我更改了图像以获得一个工作示例。
var imageElts = document.querySelectorAll("#imgopt img"); var posterElt = document.querySelector("#designPoster"); for (var i = 0; i < imageElts.length; i++) { imageElts[i].addEventListener("click", changeBgImage); } function changeBgImage(e) { posterElt.style.backgroundImage = "url(" + e.target.src + ")"; posterElt.style.backgroundSize = "contain"; posterElt.style.backgroundRepeat = "no-repeat"; }
#imgopt img { cursor: pointer; width: 100px; height: auto; } #designPoster { width: 400px; height: 157px; background: #ccc; }
<div id="imgopt"> <ol> <li> <img src="https://i0.wp.com/wptavern.com/wp-content/uploads/2016/07/stack-overflow.png?ssl=1"> </li> <li> <img src="https://i0.wp.com/wptavern.com/wp-content/uploads/2016/07/stack-overflow.png?ssl=1"> </li> <li> <img src="https://i0.wp.com/wptavern.com/wp-content/uploads/2016/07/stack-overflow.png?ssl=1"> </li> <li> <img src="https://i0.wp.com/wptavern.com/wp-content/uploads/2016/07/stack-overflow.png?ssl=1"> </li> </ol> </div> <div id="designPoster"></div>
祝你好运 ！
2楼
假设img src是您要设置的背景：
$('#imgpot img').onClick(function(){
$('#designPoster').css('background-image', `url(${this.attr('src')})`);
});
这将做的是为#imgpot每个图像标签添加一个事件处理程序，当单击时，它将#imgpot的background-image属性#designPoster给单击的图像src属性。
3楼
这将做你所要求的......
$(function() { $('#imgopt img').on('click', function() { var imageSource = $(this).prop('src'); $('#designPoster').css('background-image', 'url('+imageSource+')'); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="imgopt"> <ol> <li> <img src="asset/img/template1.jpg"> </li> <li> <img src="asset/img/template2.jpg"> </li> <li> <img src="asset/img/template3.jpg"> </li> <li> <img src="asset/img/template4.jpg"> </li> </ol> </div> <div id="designPoster"> </div>