设置背景图片后设置背景颜色答案

【问题标题】：Setting background color after setting background image设置背景图片后设置背景颜色
【发布时间】：2023-03-25 16:52:02
【问题描述】：

以下是设置背景图片和背景图片的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 文件中工作。

【问题讨论】：

你能试试把'background':'url('+e.target.result +')'改成'background-image':'url('+e.target.result +')'吗？

标签： javascript jquery html css image

【解决方案1】：

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

下一步清空 div 的背景，同时点击颜色 div

 myframe.style.background="";

：Here is your corrected working code now

【讨论】：

愚蠢的错误。非常感谢。

【解决方案2】：

我觉得可以通过采用两个DIV来实现，一个用来渲染背景图片，另一个用来渲染背景颜色。

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

希望对您有所帮助。

【讨论】：

你能用fiddle试试吗？

【解决方案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>

【讨论】：