用CSS添加色彩到背景圖像

我正在處理HTML頁面。此頁面允許用戶選擇一個圖像作爲DIV的「背景圖像」屬性值。用戶也可以選擇會使圖像變暗的顏色。用CSS添加色彩到背景圖像

在試圖建立這個，我發現這個網站：http://doodles.tev.net/texture2/。它正在做我想要的。但是，我的應用程序中的代碼似乎並沒有適當地應用背景顏色。如果設置了背景圖像值，則背景顏色沒有影響。這裏是我的：

<div id="myDiv" style="height:200px; width:200px; border:1px solid black; display:inline-block;">&nbsp;</div> 

function updateMyDiv() { 
    var bg = getBG(); 
    $("#myDiv").css("background-color", bg); 

    var fg = getFG(); 
    $("#myDiv").css("color", fg); 

    var txt = getTxt(); 
    if ((txt != null) && (txt.path != null) && (txt.path.length > 0)) { 
    $("#myDiv").css("background-image", 'url(' + txt.path + ')'); 
    } else { 
    $("#myDiv").css("background-image", ''); 
    } 
}

爲什麼當我選擇一種顏色鏈接的網站應用色調爲「60度灰色」。但是，在我的應用程序中，色彩從未得到應用。

謝謝

來源

2013-03-19 user70192

如果您需要應用bg顏色和bg圖像，則可以使用簡寫'背景'屬性。但是，bg顏色始終比bg圖像的堆棧順序更低，這意味着bg圖像始終位於頂部。您是否嘗試在頂部添加另一個「div」以獲得色調顏色？ – otinanai 2013-03-19 11:55:30

你注意到網站上的所有紋理都是* .png文件嗎？我想他們是半透明的圖像。所以你通過圖像看到了背景。 – Neograph734 2013-03-19 11:57:34

如果您提供背景圖像，它將始終顯示在背景顏色的頂部。背景顏色通常用作後備，以防背景圖像返回404，或者圖像不覆蓋所有背景。

如果您仔細觀察鏈接到的網站，您會看到圖像是半透明的;我認爲這可能是你的問題。你的圖像是否半透明？

來源

2013-03-19 11:56:41 Bill

用CSS添加色彩到背景圖像

回答

相關問題