作为颜色和背景的背景作为图象 [英] Background as color and background as image
问题描述
我知道这个问题有点冗长，但所有的都是相关的，所以我把他们在这里。我试图这自从2天，我非常接近得到一个解决方案。但在css或者脚本代码不能理解在哪里。
以下是我收到的作为对我的问题的回复的小提示链接点击此处查看
您可以在此处查看我的问题。
为了测试它，我只是复制和粘贴在链接中给出的代码，并保存为demo.html。内容正是这样：
< body&
< header>
< h1> File API - FileReader（Text）< / h1>
< / header>
< article>
< label for =files>选择文件：< / label>
< input id =filestype =fileonchange =readURL（this）; />< br>
div< div id =result>< / div>< br>
img< img src =''id =img>< br>
< / article>
< script>
var readURL;
window.onload = function（）{
//检查文件API支持
readURL = function（input）{
if（input.files &&&input.files [0]）{
var reader = new FileReader（）;
reader.onload =（function（tFile）{
return function（evt）{
//$('#img').attr('src'，evt.target.result） ;
$（'＃result'）。css（{'background-image'：'url（'+ evt.target.result +'）'，'background-size'：'200px 200px' ，'background-repeat'：'no-repeat'，'background-position'：'center'}）
};
}（input.files [0]
reader.readAsDataURL（input.files [0]）;
}
}
}
< / script>
< / body>
问题1是图像没有显示。我根本不明白为什么？ p>
问题2：
接下来在上一个问题中发布的代码您可以在这里查看。我至少能够设置背景。但不调整背景图像的大小，即使我在后台使用背景大小或不管属性值对引号或不。我已经接受了答案，因为小提琴工作，但问题仍然未解决。是这样的jQuery的.css（）函数在这种情况下没有采用多个值这个小提琴
也不能工作。但它的工作。
问题3：
另一个兴趣点是多次切换背景图像，例如。 onclick按钮的红色背景更改为红色，但上传图片的onclick上传，背景变成图像。现在我已经实现了在单页面。我可以显示你的代码请求。会话是一旦我设置图像作为背景，我不能简单地改回回颜色。请注意，背景中的颜色变化脚本在图片更改脚本之前。
您可以根据自己的专业知识选择回答任何问题。
您需要这种风格才能正常工作：
#result {
height：300px;
width：100％;
}
您还需要添加查询：
< script src =http://code.jquery.com/jquery-1.11.0.min.js>< / script>
I know this question is a bit lengthy, but all of it is related so I am putting them here.I am trying this since past 2 days and i am very close of getting a solution.But something is wrong in css or scripting code can't understand where.
Following is the fiddle link I received as a response to my question click here to view You can view my question here .
In order to test it I simply copied and pasted the code as given in the link and saved as demo.html. The contents are exactly this:
<body>
<header>
<h1>File API - FileReader (Text)</h1>
</header>
<article>
<label for="files">Select a file: </label>
<input id="files" type="file" onchange="readURL(this);" /><br>
div<div id="result"></div><br>
img<img src='' id="img"><br>
</article>
<script>
var readURL;
window.onload = function() {
//Check File API support
readURL = function(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = (function (tFile) {
return function (evt) {
//$('#img').attr('src', evt.target.result);
$('#result').css({'background-image': 'url('+evt.target.result+')','background-size': '200px 200px', 'background-repeat': 'no-repeat', 'background-position':'center'})
};
}(input.files[0]));
reader.readAsDataURL(input.files[0]);
}
}
}
</script>
</body>
Problem-1 is that image is not showing up.I simply can't understand why?
Problem-2:
Next with code posted in my previous question you can view here. I am at least able to set the background. But not resize the background image even if I use background-size after background or irrespective of the property-value pair in quotes or not.I have accepted the answer because fiddle was working,but problem is still unresolved. Is it that .css() function of jQuery is not taking multiple values well in that case this fiddle
must also not work. But its working.
Problem-3:
Another point of interest is switching the background image on-click multiple times like for eg. onclick of button for red background changes to red but onclick of upload image is uploaded and background becomes image. Now I have implemented both in single page.I can show you the code on request.Problem is once I set image as background I cannot simply change it back to color. Note the script of color change in the background is before image change script.
You can choose to answer any of the problem according to your expertise. Any help or links or research will be appreciated.
You need this style for it to work:
#result {
height: 300px;
width: 100%;
}
You also need to add query:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
这篇关于作为颜色和背景的背景作为图象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
