当前位置：文江博客话题详情

这种图像效果是如何制作出来的呢？

发布于 2024-08-24 05:47:45 字数 224 浏览 3 评论 0原文

我已经查看此页面有一段时间了。太神奇了，真的。但我不知道滚动时发生的背景图像效果是如何工作的。查看代码发现他们使用 Jquery 加上一些滚动插件，但没有关于我可以看到的图像。

怎么会说已经完成了呢？

网站：http://herohousing.org/UBBT/

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

野の 2024-08-31 05:47:45

这个技巧非常简单，只需要一些 CSS，其中每个面板都有一个固定的背景图像：

<style type="text/css">
    div {
        height: 100%;
        background-image: url(http://sstatic.net/so/img/logo.png);
        background-attachment: fixed;
        border: thin solid;
    }
    div.a {
        background-repeat: repeat-x;
        background-color: #FDD;
    }
    div.b {
        background-repeat: repeat-y;
        background-color: #DFD;
    }
    div.c {
        background-repeat: no-repeat;
        background-color: #DDF;
    }
</style>

<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>

这里我使用相同的背景图像，但不同的背景颜色和图像重复应该显示它是三个不同的元素。

编辑好吧，看来有些人怀疑我在写什么。事实上，引用的网站为此使用了 jQuery。但只能使图像适合浏览器视口的宽度和高度，因为您还无法调整背景图像的大小。 CSS 3 指定 background-size 属性但它的支持仍然是专有的，使用供应商特定的前缀，例如 -khtml- (Konqueror)、-moz-（基于 Gecko 的浏览器，如 Firefox）、-o- (Opera) 和 -webkit- （基于 WebKit 的浏览器，如 Safari）。

如果您可以放弃这种做法，则可以使用我向您展示的 CSS 技术。

This trick is quite simple and just needs some CSS where each panel has a background image that is fixed:

<style type="text/css">
    div {
        height: 100%;
        background-image: url(http://sstatic.net/so/img/logo.png);
        background-attachment: fixed;
        border: thin solid;
    }
    div.a {
        background-repeat: repeat-x;
        background-color: #FDD;
    }
    div.b {
        background-repeat: repeat-y;
        background-color: #DFD;
    }
    div.c {
        background-repeat: no-repeat;
        background-color: #DDF;
    }
</style>

<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>

Here I’m using the same background image but the different background color and image repeat should show you that it’s three different elements.

Edit Ok, it seem’s that some doubt what I am writing. And in fact, the quoted site uses jQuery for this. But only to fit the image to the width and height of the browser’s viewport since you cannot size a background image yet. CSS 3 specifies a background-size property but its support is still proprietary using the vendor specific prefix like -khtml- (Konqueror), -moz- (Gecko based browsers like Firefox), -o- (Opera) and -webkit- (WebKit based browsers like Safari).

If you can abstain from that, you can use the CSS technique I showed you.

回复收藏 0 原文