html - 透明背景图片，每页不同图片

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