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

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

javascript jquery html css image

Javascript 设置背景图像后设置背景颜色,javascript,jquery,html,css,image,Javascript,Jquery,Html,Css,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;"></

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

现在的问题是：

我想，用户可以点击上传图像选项第一次上传图像作为背景。但一旦这样做了，它就不允许用户将颜色作为背景。如何解决这个问题？相反，如果选择颜色，然后选择图像，则图像可以作为背景覆盖。我希望两者必须能够相互覆盖。为方便起见，我还添加了fiddle链接：也是fiddle中的另一个问题，其他颜色没有显示，但它们在我的html文件中工作。

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

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

希望这能对您有所帮助。

我认为您可以通过采用两个div来实现，一个用于渲染背景图像，另一个用于渲染背景颜色

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

希望这能对您有所帮助。

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

 myframe.style.background="";

单击颜色div by时清空div的背景

 myframe.style.background="";

：

首先，请更正您的foo类id名称。在所有ID中使用#ok

 myframe.style.background="";

单击颜色div by时清空div的背景

 myframe.style.background="";

：

以下代码应该可以在主流浏览器下工作。试试看


新文件
#DivBgColor，#DivBgImage{
位置：绝对位置；
左：100px；
顶部：100px；
宽度：300px；
高度：300px；
}
#DivBgColor{背景色：红色；z索引：2}
#DivBgImage{背景图像：url(https://s.yimg.com/rz/l/yahoo_en-US_f_p_142x37.png)；背景重复：无重复；z索引：4}
函数makeColorUpper（）{
var objColor=document.getElementById（“DivBgColor”）；
var objImage=document.getElementById（“DivBgImage”）；
objColor.style.zIndex=2；
objImage.style.zIndex=1；
}
函数makeImageUpper（）{
var objColor=document.getElementById（“DivBgColor”）；
var objImage=document.getElementById（“DivBgImage”）；
objColor.style.zIndex=1；
objectjimage.style.zIndex=2；
}

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


新文件
#DivBgColor，#DivBgImage{
位置：绝对位置；
左：100px；
顶部：100px；
宽度：300px；
高度：300px；
}
#DivBgColor{背景色：红色；z索引：2}
#DivBgImage{背景图像：url(https://s.yimg.com/rz/l/yahoo_en-US_f_p_142x37.png)；背景重复：无重复；z索引：4}
函数makeColorUpper（）{
var objColor=document.getElementById（“DivBgColor”）；
var objImage=document.getElementById（“DivBgImage”）；
objColor.style.zIndex=2；
objImage.style.zIndex=1；
}
函数makeImageUpper（）{
var objColor=document.getElementById（“DivBgColor”）；
var objImage=document.getElementById（“DivBgImage”）；
objColor.style.zIndex=1；
objectjimage.style.zIndex=2；
}

你能试着把

'background'：'url（'+e.target.result+'）改成'background-image'：'url（'+e.target.result+'）吗你能试着把'background'：'url（'+e.target.result+'）改成'background-image'：'url（'+e.target.result+'）吗“
？你能用小提琴试一试吗？你能用小提琴试一试吗？愚蠢的错误。非常感谢。愚蠢的错误。谢谢。