透明的背景圖像，每頁有不同的圖像

Question

我需要有一個透明的背景圖像。在每個頁面上都有不同的圖像。我已經看了這裏的其他答案，他們都有我指定的CSS頁面中的圖像不工作，因爲它是在所有頁面上。

這裏是我迄今爲止

#content 
{ 
padding: 15px 30px 0 0; 
} 

#main-content 
{ 
position: relative; 
margin-left: 250px; 
max-width: 600px; 
} 

#main-text 
{ 
padding: 10px 15px 19px 15px; 
z-index: 1; 
position: relative; 
} 

img 
{ 
    position: absolute; 
    top: 0;  
    width: 100%; 
    height: 100%; 
    opacity: 0.1; 
    z-index: -1;  
} 

但它是運用的透明度和大小的頁面上的所有其它圖像。

Answer 1

我想通了，我只是爲背景圖像和前景圖像創建了單獨的類。

HTML

<img class = "background" src="Images/wheel.png" alt="wheel"/> 

CSS

img.background 
{ 
    position: absolute; 
    top: 0;  
    width: 100%; 
    height: 100%; 
    opacity: 0.1; 
    z-index: -1;  
}