透明背景图像，每页上有一个不同的图像

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