在Div中應用背景圖像的顏色

我正在開發this網站，我正面臨背景圖像的問題。當我在谷歌上搜索，我意識到，我可以這樣做：在Div中應用背景圖像的顏色

.tinted-image { 
    background: 
     linear-gradient(rgba(255, 0, 0, 0.45)), 
     url(image.jpg); 
}

，但不知何故，我不能做到這一點：

.tinted-image { //Defining color and image differently 
    background: 
     linear-gradient(rgba(255, 0, 0, 0.45)), 
    background: 
     url(image.jpg); 
}

因爲我的計劃，我不能使用的第一個代碼，並我必須不同地定義背景顏色和圖像（懸停和東西）。有沒有辦法以第二種方式做到這一點？或者我可以用Javascript實現這一點？

來源

2015-04-02 Tetsudou

你爲什麼不能使用1次，第2次是不可能的，因爲你不能追加值，他們只是取代最後定義的值。 – Wobbles 2015-04-02 14:54:15

我想在圖像懸停時更改圖像的色調。此外，我從'.xml'文件導入圖像URL，因此我無法將網址硬編碼到CSS中。 – Tetsudou 2015-04-02 14:55:53

除非您通過JS或類似方式創建CSS，否則您會以任何方式「硬編碼」url，在這種情況下，您可以輕鬆創建整個類規則。只是使處理.tinted像一個新的類：懸停 – Wobbles 2015-04-02 14:59:18

.tinted-image { 
    background: 
     linear-gradient(rgba(255, 0, 0, 0.45)), 
     url(image.jpg); 
}

是完全有效的，只是缺少一些瀏覽器兼容性後備。如果你只希望它在鼠標上「色調」這只是一個alpha混合覆蓋而不是實際的色調，只需爲它創建一個：hover pseudo。

.tinted-image { 
    background: 
     url(image.jpg); 
} 
.tinted-image:hover { 
    background: 
     linear-gradient(rgba(255, 0, 0, 0.45)), 
     url(image.jpg); 
}

另一種完全可以接受的方法是使用嵌套的div創建疊加效應

<div class="imgDiv"> 
    <div class="overlayDiv"/> 
</div>

.imgDiv { 
    background: 
     url(image.jpg); 
} 
.overlayDiv:hover { 
    background: 
     linear-gradient(rgba(255, 0, 0, 0.45)); 
}

來源

2015-04-02 15:08:27 Wobbles

'overlayDiv'中不需要圖像。此外，你可能想明確地設置它的大小，否則它會有0高度。 – riv 2015-04-02 15:14:35

正確處理第一個計數，並且因爲他在示例中遺漏了數據而留下了大小，我假定他以某種方式隱式設置它。 – Wobbles 2015-04-02 15:22:13

第二個背景聲明將覆蓋第一個。你正在尋找的是背景圖像和背景顏色。

來源

2015-04-02 14:54:42 Matt

'linear-gradient（rgba（255，0，0，0.45））'用於爲圖像着色，而不是着色div。我不認爲有可能用'background-color'給背景圖像着色。 – Tetsudou 2015-04-02 14:59:01

@Tetsudou沒有區別，你所做的只是疊加背景，而不影響圖像的色調。 – Wobbles 2015-04-02 15:03:21

是的，但'linear-gradient'定義了一個圖像，所以你不能用它作爲'background-color'屬性的值。 – riv 2015-04-02 15:04:11

在Div中應用背景圖像的顏色

回答

相關問題