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

Following is the html-javascript code for setting the background image and background image.

以下是用于设置背景图像和背景图像的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>

The CSS FILE FOR COLORS IS(just in case you need to look at that as well)

用于颜色的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);
}

Now the problem is: I want that user may click upload image option first and upload the image as a background. But once that is done it not allowing user to se color as a background. How to fix that? On the contrary if color is choosen and then image, image can override as background.I want that both must be able to override each other. For convenience I also the fiddle link : here Also one more issue in the fiddle, other colors are not showing up, but they are working in my html file.

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

3 个解决方案

#1

First of all correct your id name of class foo . use # in all ids ok

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

next empty the background of the div while on clicking of color div by

接下来在点击颜色div时清空div的背景

 myframe.style.background="";

: Here is your corrected working code now

：现在是您更正的工作代码

#2

I think you can achieve by adopting two DIVs, one of them is used to render background images and the other render background color.

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

By changing 'z-index' of DIV, you can display COLOR at top or bottom.

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

Hope this can help you .

希望这可以帮到你。

#3

The following code should work under mainstream browser. Take a try.

以下代码应在主流浏览器下运行。试一试。

<!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>

#1