透明背景图片，每页都有不同的图片

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