css - 双体背景图片

转载作者：太空宇宙更新时间：2023-11-03 22:10:11

25

4

是否有可能:

主页的带图案的主体背景图片，
接着是第一个上面的另一个背景图片(这次是图片
右侧，页面边缘)
内容(使用半透明 gif 覆盖 body 背景图像)
应该是可滚动的，而两个背景图像都保持固定。
理想情况下没有脚本或 hack 的 css 解决方案

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

非常感谢

删除

最佳答案

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

一些浏览器 (Safari) 允许 (CSS3) 多个背景图像，但由于这些还不是通用的，这是我的解决方案。

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

background-attachment: fixed;

使用 background-position 设置背景的顶部、底部、中心、右侧、左侧等

background-position: top right;

并将背景重复设置为您想要的设置。

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

如果您需要一个完整的示例，请更改背景图片 URL 并使用这个(显而易见的)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>

关于css - 双体背景图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/955221/

25

4

0

文章推荐： css - 我的页面布局需要某种 IE 6 hack 吗？

文章推荐： node.js - 如何在 firebase-admin 中销毁 idToken？

文章推荐： css - 基于表单内容动态更新 css 属性的方法？

assembly - 打印存储在字节中的值的宏。 assembly 体
程序集，masm 嘿，我写了宏来打印存储在 dane1 段中的 1 字节值。我将值除以 16，然后将提醒推送到堆栈，直到值==0。然后我弹出提醒将它们转换为 ASCII 码，并打印它们。有人可以看
java - SOAP 体，命名空间问题
我在 Apache Geronimo 2.1.3 上有一个 Web 服务应用程序。我正在使用 JAX-WS，使用 SOAP 1.1 注释 POJOS。 (使用 Sun JDK 1.5) 各种客户端都
java - 同步代码块是只阻塞赋值还是阻塞整个 block 体？
我有一个数据变量，monthArray，它被多个消费者读取，并由单个定期更新程序线程定期更新数据。全部异步。我已经考虑了这两个选项来安全地执行更新。 ArrayList tempArray
r - 用系统点栅格填充 3D 体
我有一组 3D 体。每个 Body 由 8 个点定义，每个点具有三个坐标。所有的物体都是立方体的或近似立方体的。我想用系统的点栅格“填充”立方体。坐标存储在简单的 data.frames 中。我开发
java - 修改 HttpServletRequest 体
我正在处理遗留代码，需要打补丁。问题:一个古老的应用程序发送错误的 HTTP POST 请求。其中一个参数未经过 URL 编码。我知道这个参数总是排在最后而且我知道它的名字。我现在正尝试在运行在 t
iphone - 我想在检测到触摸点时移动 Sprite 体
我想在触摸屏幕时移动 sprite body ，但它不能发生...... -(void)ccTouchEnded:(UITouch *)touch withEvent:(UIEvent *)event
c - 如何初始化 union 体？
这个问题在这里已经有了答案: Can a union be initialized in the declaration? (3 个答案) 关闭 7 年前。如果它是一个struct那么它就可以完成
c++ - siginfo 匿名 union 体
我正在尝试获取生成 sigsys 信号的系统调用的地址!但我从 gcc 收到以下错误: gcc emulator.c -fms-extensions error: ‘siginfo_t’ has no
php - Guzzle 返回流空体而不是 json 体
当我使用 Postman 进行 API 调用时，我收到一个 JSON 对象..这是我所期望的。但是，当我像这样与 Guzzle 进行相同的调用时: $client = new \GuzzleHttp
c# - 表达式体 VS block 体
在编码时，出现了差异。通常在编写简单的方法或构造函数时，我经常使用表达式体技术。但是，当我产生以下内容时: public class Sample : ISample { private r
android - LibGDX Touch Box2D 体
我正在使用 LibGDX 创建一个新项目。我想做的是，我将 tmx 文件中的主体加载到工作正常的关卡中。尸体也有一个 Sprite 。问题是，我想让用户触摸场景中的某些 body 。当他们触摸 b
c - 循环遍历 C 结构体(不带 union 体)
我的意图:在不使用 union 的情况下循环遍历一个结构的 30 个成员，所有成员都是字符数组类型，每个成员都存储对 itoa 的调用结果。在下面的代码中，我将结构体成员命名为a-z、A-D。在调用函
java - 如何在 Java 中创建 C 风格的 union 体？
我必须将我的代码段之一从 C 转换为 java。代码如下。 union commandString{ char commndStr[20]; struct{ char
c++ - 由 float : completely insane output 组成的 union 体
#include union NumericType { float value; int intvalue; }Values; int main() { Values.va
kotlin - 错误:(15，1)Kotlin:具有 block 体 'return'的函数中需要的('{…}'表达式)
我在此代码中收到错误: fun num(num:Int):Int { if (num > 0){ print(num % 10) return num / 10

首页

博学

6Ren·AI

商城

css - 双体背景图片

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

CSS

HTML