Question

我有一个在body标签上重复的图案背景图片图像为256x256像素。

body {  
   font: 12px/1.4 Helvetica, sans-serif; 
   color: #fff; 
   background-image: url("img/bg1.jpg");
   background-repeat:repeat;
}

#bg2{
   ?
}

#wrap{
   width:960px;
   margin:0 auto;
}

然后我得到了第二张图片，我希望将其固定在与身体图像重叠的屏幕中央。此图像是第二个bacground图像，它不需要重复itselft。尺寸：400x800px。

这第二张图像看起来与边缘的第一张图像相同，但中间有一些闪电，所以你可能需要一些透明度。

HTML：

<body>
        <div id="wrap">

        <div id="bg2">..here comes the 2nd bkground image..</div>

        ....content
    </div>
</body>

问题是，多个免费图像并不容易实现。有人可以帮忙吗？

Answer 1

尝试这样的事情：

#bg2 {
    position: absolute;
    height: 100%;
    width: 100%;
    background: url('img/bg2.jpg') no-repeat fixed center;

    /* IE transparency */
    filter: alpha(opacity=60);

    /* standard transparency */
    opacity: 0.6;
}

多个背景图像css问题

1 个答案: