배경 이미지 설정 후 배경색 설정

다음은 배경 이미지 및 배경 이미지를 설정하기위한 html-javascript 코드입니다. 나는 사용자가 처음 업로드 이미지 옵션을 클릭 할 수 있음을 원하는 : 색상 CSS 파일이배경 이미지 설정 후 배경색 설정

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

.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 파일에서 일하고 있습니다.

출처

2014-06-17 MS Wachasunder

당신은' '배경'변경 시도 할 수 있습니다 + ')''? –

먼저 foo 클래스의 ID 이름을 수정하십시오. 확인 모든 식별자에 #을 사용

다음 빈

myframe.style.background="";

에 의해 컬러 사업부의 클릭에 사업부있는 동안의 배경 : Here is your corrected working code now

출처

2014-06-17 04:07:58

어리석은 실수. 고마워. –

내 기쁨 ..... :) –

두 개의 DIV를 채택하여 달성 할 수 있다고 생각합니다. 그 중 하나는 배경 이미지를 렌더링하고 다른 하나는 배경색을 렌더링하는 데 사용됩니다.

DIV의 'z-index'를 변경하여 상단 또는 하단에 COLOR를 표시 할 수 있습니다.

희망이 도움이 될 수 있습니다.

출처

2014-06-17 04:05:01

바이올린으로 시도해 볼 수 있습니까? –

다음 코드는 주류 브라우저에서 작동합니다. 시도해보십시오. 'URL ('+ e.target.result + ')' '에' '배경 이미지': 'URL을 ('+ e.target.result

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

배경 이미지 설정 후 배경색 설정

답변

관련 문제