＆LT; img src＆gt;作为div中的背景图像

时间：2016-06-29 00:35:06

标签： javascript jquery html css

是否可以将此作为我的背景

<img src="" alt="sample" width="480" height="500" border="0">

这是我下面的代码我希望能够制作我的图像背景并能够以同样的方式改变它们我现在这样做请帮助我一直在询问并寻找答案而且我得到的就是我如何可以将图像设置为背景而无法使用下拉菜单进行更改

＆＃13;
＆＃13; 
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"));
  });
});
＆＃13; 
.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;
}
＆＃13; 
<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">
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：1)

从此

更改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")+')'
      );

将$ .attr调用的其余部分转换为上面的$ .css调用示例。

答案 1 :(得分：1)

如果您想要在页面背景中显示图像，请替换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")+')');
  });
});

答案 2 :(得分：0)

问题是代码错了，这是正确的代码

$(document).ready(function() {
  $('.colore.active').each(function(){
     $('.container ').css(
       'background-image','url(' +$(this).data("image")+')'
      );
  });
  $('.colore').on('click',function(){
  	$('.container').css('src', '');
  	$('.container ').css('background-image','url(' +$(this).data("image")+')');
  });
});

答案 3 :(得分：0)

我清理了一些示例代码，我想我已添加了您正在寻找的背景开关

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>

相关问题
最新问题