如何获得不固定的全屏背景图片?

发布于 2024-11-25 02:04:32 字数 281 浏览 3 评论 0原文

我知道几种技术可以实现全屏背景图像,使用 CSS3 或绝对定位和 100% 高度/宽度。

然而,所有这些技术都会产生固定的背景图像,这意味着如果您有一些大于屏幕的内容需要滚动条,则背景图像在滚动时将保持固定。

是否可以将背景图像拉伸到页面的宽度/高度,而不是屏幕

I am aware that several techniques exist to have a fullscreen background image, either with CSS3 or with absolute positioning and 100% height/width.

However, all these techniques result in fixed background images, meaning that if you have some content bigger than the screen that needs a scrollbar, the background image will stay fixed when scrolling.

Is it possible to have the background image stetch to the width/height of the page, instead of the screen?

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

扫码二维码加入Web技术交流群

发布评论

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

评论(4

伪装你 2024-12-02 02:04:32

我在构建全屏幻灯片时遇到了同样的问题:固定位置使图像在滑动包含元素时保持在原位,而不是让它们随该元素滑动...

我尝试了很多使用 那些技术

  • 仅CSS技术#1:在位置设置为相对的情况下工作正常,但是不居中图像垂直。
  • 很棒,简单,渐进的CSS3方式:我之前尝试了所有的可能性,但都没有成功,才意识到不填充位置值是有效的(真的很棒)!

    <前><代码>html {
    背景:url(images/bg.jpg) 无重复中心center;
    -webkit-background-size:覆盖;
    -moz-背景大小:封面;
    -o-背景大小:覆盖;
    背景大小:封面;
    }

I had the same problem as I'm building a fullsceen slideshow: fixed position makes images stay in place while sliding containing element instead of letting them sliding with this element...

I tried a lot of workaround using those techniques:

  • CSS-Only Technique #1: works fine with position set to relative, but doesn't center the image verticaly.
  • Awesome, Easy, Progressive CSS3 Way : I tried all possibilities in vain before to realise that not filling the position value worked (really awesome)!

    html { 
        background: url(images/bg.jpg) no-repeat center center; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    
意中人 2024-12-02 02:04:32

我会向您指出 backstretch jQuery 插件 将此功能添加到您的页面。链接页面显示内容如何保持固定并根据浏览器的宽度/高度进行缩放。

编辑

我不太确定如何实现这样的解决方案;我认为你可能必须使用 JavaScript,因为在加载之前你无法确定内容的大小。以下是我的尝试方法:

  • 计算加载后的内容大小 将
  • 背景图像的拉伸设置为内容大小
  • 绑定一些重复此操作到任何浏览器大小更改的函数

我不太确定它在性能方面的感觉如何,但是这种技术的一个缺点是,除非您对内容设置大小限制,否则您可能必须使用非常大的图像来覆盖所有情况。

I'd point you to the backstretch jQuery plugin to add this functionnality to your page. The linked page shows how the content stays fixed and scales according to the width/height of the browser.

edit

I'm not really sure how i would implement such a solution; i think you may have to use javascript since you can't find out the size of your content before it's loaded. Here's how i would try it:

  • calculate the content size after load
  • set the stretching of the background image to the content size
  • bind some function that repeats this to any browser size change

I'm not really sure how it would feel performance-wise, but one may drawback to this technique is that unless you set size limits to your content, you may have to use a very large image to cover all cases.

贩梦商人 2024-12-02 02:04:32

这种方法的问题在于你永远无法猜测你的内容将会有多大; 1,000 像素?一万像素?想象一下拉伸那么大的图像,如果您决定使用巨大的图像,它会减慢页面加载速度,或者如果您决定使用合理大小的图像,如果超出其边界,它会严重扭曲。

以此为例,相应地增加内容数,看看背景图像如何变形: http://jsfiddle.net/安德烈西利奇/75Sfp/

The problem with such an approach is that you can never guess how big your content is going to get; 1,000 pixels? 10,000 pixels? imagine stretching an image that big, if you decide to use a huge image it will slow down your page loads or if you decide to go with a reasonably sized image it will distort very badly if it goes outside its boundaries.

Take this for example and increase the content count accordingly and see how the background image distorts: http://jsfiddle.net/andresilich/75Sfp/

把时间冻结 2024-12-02 02:04:32

假设您希望在网站中使用可变图像大小的标题(占据整个高度),

在标题中添加一个 ID 或类,并使用您想要的任何命名。

我将其视为 (id="test")

现在,转到链接的 JS 文件并粘贴此..

var x = screen.availHeight + "px";
console.log(x)

document.getElementById("test").style.height = x;

Suppose you want a variable image-size header in your website (which occupies the complete height)

Inside your header add an ID or class with whatever naming you want.

I will take it as (id="test")

Now, go to the linked JS file and paste this..

var x = screen.availHeight + "px";
console.log(x)

document.getElementById("test").style.height = x;
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文