两个非滚动背景图像的CSS示例

Question

是否有可能：

主页的图案化正文背景图片
在第一张背景上显示另一张背景图片（这次是照片上的图片右侧，页面边缘）
内容（使用半透明gif叠加在身体背景图像上）
应该是可滚动的，同时两个背景图像都保持固定。
理想情况下没有脚本或黑客的css解决方案

请帮助我，因为我正在失去理智和理智，试图弄清楚如何让它发挥作用。

非常感谢

德尔

Answer 1

两个非滚动背景图像的CSS示例

某些浏览器（Safari）允许（CSS3）多个背景图像，但由于这些还没有普及，这是我的解决方案。

首先，您不需要固定位置div。您可以使用以下方法阻止背景图像滚动：

background-attachment: fixed;

使用背景位置将背景放在顶部，底部，中间，右侧，左侧，例如

background-position: top right;

并将background-repeat设置为您想要的设置。

CSS

下面的CSS将为您提供两个不在页面背景中滚动的背景图像 - 将#mydiv的宽度设置为您想要的任何值（或将其设置为100％）并将其高度设置为2000px（仅用于测试滚动），并使用您的图片网址而不是示例：

body {
    background-image: url(body_background.gif);
    background-attachment: fixed;
}
#mydiv {
    position: absolute;
    right: 0px; /* or whatever */
    background-image: url(div_background.gif);
    background-attachment: fixed;
}

HTML

如果您需要一个完整的示例，请更改背景图片网址并使用此（显而易见的）HTML / CSS示例作为起点：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>untitled</title>
    <style type="text/css">
    body {
        background-image: url(body_background.gif);
        background-attachment: fixed;
    }
    #mydiv {
        position: absolute;
        top: 0px; /* 0 is default for top so remove or make > 0 */
        right: 0px; /* or left, whatever you need */
        width: 250px; /* or whatever you want */
        height: 1500px; /* remove after testing! */
        background-image: url(div_background.gif);
        background-attachment: fixed;
    }
    </style>
</head>
<body>
<div id="mydiv">
    the div
</div>
</body>
</html>

Answer 2

这可能不是最“正确”的解决方案，但您可以为HTML和body标签使用单独的背景图像。 IE

html {
    background-image: url('images/bg_repeat.gif');
    background-position: top center;
    }

body {
    background-image: url('images/splatter_top.png');
    background-position: top center;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
    text-align: center;
    }

Answer 3

您可以使用混合的背景图像和绝对定位的div /图像来执行此操作：

身体获得带图案的背景
侧面的图片是使用固定定位的图像（或以图像为背景的潜水）（即使用位置：固定的css规则）
内容将位于div中，半透明gif作为背景。

我认为它可以获得你需要的东西，每个标志在CSS中都是可行的，除了IE的某些版本（即IE6及以下版本）的固定定位，因为位置：固定版本在IE版本7以后仅在“标准”中可用 - 兼容模式“（但本文可能有所帮助：position:fixed for Internet Explorer）

双体背景图像

3 个答案:

两个非滚动背景图像的CSS示例

CSS

HTML