Question

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

颜色的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文件中工作。

Answer 1

首先更正类foo的id名称。在所有ID中使用＃ok

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

 myframe.style.background="";

：Here is your corrected working code now

Answer 2

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

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

希望这可以帮到你。

Answer 3

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

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

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

3 个答案: