设置背景图像后设置背景颜色

以下是用于设置背景图像和背景图像的html-javascript代码。设置背景图像后设置背景颜色

<html> 
     <link rel="stylesheet" type="text/css" href="try2.css"> 
    <body> 
    Choose the color<br> 

     <div class="foo" id="#13b4ff" style="background-color:#13b4ff;"></div> 
     <div class="foo" id="ab3fdd" style="background-color:#ab3fdd;"></div> 
     <div class="foo" id="ae163e" style="background-color:#ae163e;"></div> 
     <br><br> 
     <div id="myframe1" style="padding:5px;width:300px;height:400px;border:1px solid black;"> 
     <p><img src="img-thing.png" style="width:200px;height:200px;"/><p> 
     </div> 
     <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"> </script> 
     <script type="text/javascript"> 
      $(document).ready(function(){ 
      $('.foo').click(function(){ 
        var str1 = $(this).attr('id'); 
        var myframe = document.getElementById('myframe1'); 
        myframe.style.backgroundColor=str1; 
        myframe.style.width=300; 
        myframe.style.height=400; 
      }); 
      }); 
     </script> 
     <div><input type='file' onchange="readURL(this);" /> 
     <img id="blah"/></div> 
     <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
     <script type="text/javascript"> 
     function readURL(input) { 
      if (input.files && input.files[0]) { 
       var reader = new FileReader(); 
       reader.onload = function (e) { 
         $('#myframe1').css({ 
           'background':'url('+e.target.result +')', 
           'background-size':'310px 410px' 
             }); 
       }; 
       reader.readAsDataURL(input.files[0]);//To display images uncomment this 
      } 
     } 
    </script> 
    </body> 
</html>

FOR颜色的CSS文件（以防万一，你需要在那看为好）

.foo { 
    float: left; 
    width: 20px; 
    height: 20px; 
    margin: 5px 5px 5px 5px; 
    border-width: 1px; 
    border-style: solid; 
    border-color: rgba(0,0,0,.2); 
}

现在的问题是：我希望该用户可先点击上传图片选项上传图像作为背景。但一旦完成，不允许用户将颜色作为背景。如何解决这个问题？相反，如果选择了颜色，然后图像，图像可以作为背景覆盖。我希望两者必须能够相互覆盖。为了方便，我也是小提琴链接：here还有一个小提琴问题，其他颜色没有出现，但他们正在我的html文件中工作。

来源

2014-06-17 MS Wachasunder

可以尝试更改' '背景'： 'URL（' + e.target.result + '）''为' '背景图像'： 'URL（' + e.target.result + '）''？ –

首先校正你的foo类的id名。使用＃在确定所有的ID

下一个空的div，而在颜色的div的点击通过

myframe.style.background="";

背景：Here is your corrected working code now

来源

2014-06-17 04:07:58

愚蠢的错误。非常感谢。 –

我的荣幸..... :) –

我认为你可以通过采用两个DIV来实现，其中一个用于渲染背景图像，另一个用于渲染背景颜色。

通过更改DIV的'z-index'，可以在顶部或底部显示COLOR。

希望这可以帮助你。

来源

2014-06-17 04:05:01

你能用小提琴试试吗？ –

下面的代码应该在主流浏览器上运行。试试吧。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <title> New Document </title> 
    <meta name="Generator" content="EditPlus"> 
    <meta name="Author" content=""> 
    <meta name="Keywords" content=""> 
    <meta name="Description" content=""> 
</head> 

<style> 
#DivBgColor,#DivBgImage{ 
    position:absolute; 
    left:100px; 
    top:100px; 
    width:300px; 
    height:300px; 
} 
#DivBgColor{background-color:red;z-index:2} 
#DivBgImage{background-image: url(https://s.yimg.com/rz/l/yahoo_en-US_f_p_142x37.png);background-repeat: no-repeat;z-index:4} 
</style> 
<script language=javascript> 

    function makeColorAbove(){ 
     var objColor = document.getElementById("DivBgColor"); 
     var objImage = document.getElementById("DivBgImage"); 
     objColor.style.zIndex=2; 
     objImage.style.zIndex=1; 
    } 
    function makeImageAbove(){ 
     var objColor = document.getElementById("DivBgColor"); 
     var objImage = document.getElementById("DivBgImage"); 
     objColor.style.zIndex=1; 
     objImage.style.zIndex=2; 

    } 
</script> 
<body> 
    <div id="DivBgColor" ></div> 
    <div id="DivBgImage"></div> 
    <input type=button value="makeColorAbove" onclick="makeColorAbove()"> 
    <input type=button value="makeImageAbove" onclick="makeImageAbove()"> 
</body> 
</html>

来源

2014-06-18 00:59:01

设置背景图像后设置背景颜色

回答

相关问题