Настройка цвета фона после установки фонового изображения

Ниже приведен код 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); 
}

Теперь проблема: Я хочу, чтобы пользователь может нажать опцию загрузки изображений первого и загрузите изображение в качестве фона. Но как только это будет сделано, это не позволит пользователю использовать цвет в качестве фона. Как это исправить? Наоборот, если цвет выбран, а затем изображение, изображение может переопределяться как background.I хочу, чтобы оба они могли переопределить друг друга. Для удобства я также ссылка на скрипку: here Также еще одна проблема в скрипке, другие цвета не отображаются, но они работают в моем html-файле.

источник

2014-06-17 MS Wachasunder

Можете ли вы попробуйте изменить ' 'фон': 'URL (' + e.target.result + ')' 'на' 'фоновое изображение': 'URL (' + e.target.result + ')' '? –

Прежде всего, верните свое имя класса foo. использовать # во все ид ок

следующий пустой фон из сНа времени на щелканье цвета по DIV

myframe.style.background="";

: Here is your corrected working code now

источник

2014-06-17 04:07:58

Глупая ошибка. Большое спасибо. –

Мое удовольствие ..... :) –

Я думаю, что вы можете достичь, приняв два DIVs, один из которых используется для рендеринга фоновых изображений и другого цвета фона рендеринга.

Изменяя «z-index» DIV, вы можете отображать ЦВЕТ сверху или снизу.

Надеюсь, это может вам помочь.

источник

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

Настройка цвета фона после установки фонового изображения

ответ

Смежные вопросы