背景作為顏色，背景作為圖像

Question

我知道這個問題有點冗長，但是所有問題都相關，所以我將它們放在這里。我從過去兩天開始一直在嘗試這個問題，而且我已經很接近解決方案了。但是CSS或腳本代碼中可能出了點問題不知道在哪里。

以下是我為我的問題的答復收到的小提琴鏈接點擊這里查看您可以查看我的問題在這里。

為了對其進行測試，我僅復制並粘貼了鏈接中給出的代碼並將其保存為demo.html。 內容就是這樣的：

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

問題1是圖像沒有顯示，我根本不明白為什么？

問題2：
接下來，在我之前的問題中發布代碼，您可以在此處查看。 我至少能夠設置背景。 但是，即使我在背景后面使用background-size或不管是否使用引號中的屬性值對，也都不能調整背景圖像的大小。我已經接受了答案，因為小提琴正在工作，但是問題仍然沒有解決。 是不是jQuery的.css（）函數不能很好地采用多個值，在這種情況下，這種提琴也一定無法正常工作。 但它的工作。

問題3：
另一個興趣點是多次點擊背景圖像，例如。 紅色背景按鈕的onclick變為紅色，但是上傳圖像的onclick被上傳，背景變為圖像。 現在我已經在單個頁面中實現了它們，我可以根據要求向您顯示代碼。問題是一旦將圖像設置為背景，就無法簡單地將其更改回彩色。 請注意，背景中的顏色更改腳本位於圖像更改腳本之前。

您可以根據自己的專業知識選擇回答任何問題。 任何幫助或鏈接或研究將不勝感激。

Answer 1

您需要這種樣式才能使其工作：

#result {
    height: 300px;
    width: 100%;
}

您還需要添加查詢：

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

Answer 2

第一個問題

我沒有弄清楚為什么您的小提琴確切地有一個'readURL'錯誤是不確定的，但是由於您使用了jquery，因此我附加了該事件並使用jquery對其進行了調用，現在它可以正常工作了：

$(function () {
    $("#files").on('change', readURL);
});

//Check File API support
function readURL() {
    var input = this;
    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]);
    }
}

工作演示

背景作為顏色，背景作為圖像

問題描述

2 個解決方案

解決方案1
1 已采納 2014-06-15 06:34:55

解決方案2
1 2014-06-15 07:00:35

背景作為顏色，背景作為圖像

問題描述

2 個解決方案

解決方案1 1 已采納 2014-06-15 06:34:55

解決方案2 1 2014-06-15 07:00:35

解決方案1
1 已采納 2014-06-15 06:34:55

解決方案2
1 2014-06-15 07:00:35