< img src>作为div中的背景图像
< img src>作为div中的背景图像
提问于 2016-06-29 08:35:06
有没有可能把这个作为我的背景
<img src="" alt="sample" width="480" height="500" border="0">这是我的代码下面，我希望能够使我的图像背景，并能够改变他们的方式，我正在做它的时刻，请帮助我一直在询问和寻找答案，我得到的是我可以如何设置图像作为背景，而不能改变它与下拉菜单
function fctCheck(gender) {
var elems = document.getElementsByName("subselector");
for (var i = 0; i < elems.length; i++) {
elems.item(i).style.display = "none";
}
document.getElementById(gender).style.display = "block";
}
$('#men').on('change', function () {
$("#wsl").css('display', (this.value == 'lsm') ? 'block' : 'none');
});
$('#men').on('change', function () {
$("#mtsm").css('display', (this.value == 'tsm') ? 'block' : 'none');
});
$(document).ready(function() {
$('.colore.active').each(function(){
$('.container img').attr('src', $(this).data("image"));
});
$('.colore').on('click',function(){
$('.container img').attr('src', '');
$('.container img').attr('src', $(this).data("image"));
});
});.container {background-color: lightgrey;
width: 150px;
height: 150px;
border: 2px solid;
position: relative;
overflow: auto;
}
.container2 {background-color: lightgrey;
width: 150px;
height: 150px;
border: 2px solid;
position: relative;
overflow: auto;
}
.colore {
float: left;
width: 20px;
height: 20px;
margin: 5px;
border: 1px solid rgba(0, 0, 0, .2);
}
.white {
background: #FFFFFF;
}
.yellow {
background: #FAFF38;
}
.orange {
background: #FFA200;
}
.red {
background: #FF0000;
}
.dorange {
background: #FF5500;
}
.lgreen {
background: #80FF00;
}
.green {
background: #45C731;
}
.turk {
background: #17DDBC;
}
.lblue {
background: #00A2FF;
}.blue {
background: #1713F6;
}.purple {
background: #AB09D3;
}.black {
background: #000000;
}<div id="box" class="container" style="float:left;">
<img src="" alt="sample" width="150" height="150" border="0"></div>
<div class="container2" style=" float: left;">
<select id="Gender" onchange="fctCheck(this.value);">
<option value="">Choose Gender</option>
<option value="men">Men</option>
</select>
<br>
<br>
<select id="men" name="subselector" style="display:none">
<option value="">Choose an item</option>
<option value="lsm">long sleeve</option>
<
</select>
<select id="wemen" name="subselector" style="display:none">
<option value="slw">short sleeve</option>
</select>
<select id="girls" name="subselector" style="display:none">
<option value="shortsg">shorts</option>
</select>
<select id="boys" name="subselector" style="display:none">
<option value="tshirtb">tshirt</option>
</select>
<div style='display:none;' id="wsl">
<div class="colore white active" data-image="https://opensource.org/files/osi_keyhole_300X300_90ppi.png">
</div>
<div class="colore black" data-image="http://mebe.co/ford">
</div>
<div class="colore yellow" data-image="http://mebe.co/f150">
</div>
<div class="colore orange" data-image="http://mebe.co/yukon">
</div>
<div class="colore red" data-image="http://mebe.co/370z">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="http://www.pureexample.com/js/lib/jquery.ui.touch-punch.min.js"></script>
<script src="http://circletype.labwire.ca/js/circletype.js"></script><script src="http://tympanus.net/Development/Arctext/js/jquery.arctext.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
回答 4
Stack Overflow用户
回答已采纳
发布于 2016-06-29 10:04:11
我对您的示例代码进行了一些清理，我想我已经添加了您正在寻找的后台开关
function fctCheck(gender) {
$("select[name='subselector']").hide();
$("#" + gender).show();
}
function setBackground(selector, url){
$(selector).css("background-image", "url(" + url + ")" );
}
$("#men").on("change", function() {
$("#wsl")[this.value === "lsm" ? "show" : "hide"]();
$("#mtsm")[this.value === "tsm" ? "show" : "hide"]();
});
$(function() {
setBackground("#box", $(".colore.active").attr("data-image"));
$(".colore").on("click", function() {
setBackground("#box", $(this).attr("data-image"));
});
});#wsl { display:none; }
select[name='subselector'] { display:none; }
#box {
background-size: cover;
background-position: center center;
}
.container, .container2 {
background-color: lightgrey;
width: 200px;
height: 200px;
border: 2px solid;
position: relative;
overflow: auto;
float: left;
}
.colore {
float: left;
width: 20px;
height: 20px;
margin: 5px;
border: 1px solid rgba(0, 0, 0, .2);
}
.white { background: #FFFFFF; }
.yellow { background: #FAFF38; }
.orange { background: #FFA200; }
.red { background: #FF0000; }
.dorange { background: #FF5500; }
.lgreen { background: #80FF00; }
.green { background: #45C731; }
.turk { background: #17DDBC; }
.lblue { background: #00A2FF; }
.blue { background: #1713F6; }
.purple { background: #AB09D3; }
.black { background: #000000; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box" class="container"></div>
<div class="container2">
<select id="Gender" onchange="fctCheck(this.value);">
<option value="">Choose Gender</option>
<option value="men">Men</option>
</select>
<select id="men" name="subselector">
<option value="">Choose an item</option>
<option value="lsm">long sleeve</option>
</select>
<div id="wsl">
<div class="colore white active" data-image="http://lorempixel.com/200/200"></div>
<div class="colore black" data-image="http://lorempixel.com/150/150"></div>
<div class="colore yellow" data-image="http://lorempixel.com/160/160"></div>
<div class="colore orange" data-image="http://lorempixel.com/170/170"></div>
<div class="colore red" data-image="http://lorempixel.com/180/180"></div>
</div>
</div>
Stack Overflow用户
发布于 2016-06-29 09:04:28
如果你想让图片出现在页面的背景中，那就替换掉你的document.ready函数：
$(document).ready(function() {
$('.colore.active').each(function(){
$('.container img').attr('src', $(this).data("image"));
});
$('.colore').on('click',function(){
$('.container img').attr('src', '');
$('.container img').attr('src', $(this).data("image"));
});
});使用以下document.ready函数：
$(document).ready(function() {
$('.colore').on('click',function(){
$('body').css('background-image','url(' +$(this).data("image")+')');
});
});Stack Overflow用户
发布于 2016-06-29 08:56:50
从此更改HTML
<div id="box" class="container" style="float:left;">
<img src="" alt="sample" width="150" height="150" border="0"></div>到这个
<div id="box" class="container" style="float:left;"></div>从此更改javascript
$(document).ready(function() {
$('.colore.active').each(function(){
$('.container img').attr('src', $(this).data("image"));到这个
$(document).ready(function() {
$('.colore.active').each(function(){
$('.container').css(
'background-image','url(' +$(this).data("image")+')'
);按照上面的$.css调用示例转换其余的$.attr调用。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38088438
复制相关文章
相似问题
腾讯云开发者
