Question

我网站的背景是一个覆盖整个网页的巨大图片，我该如何制作，以便检测用户的屏幕尺寸并相应更改背景图片？

比如说，我的背景图像是1x1px，如果用户屏幕是2x2px（这只是一个例子，没有人有这种小屏幕），我想伸展我的背景以适应2x2。如果用户屏幕是0.5x0.6px，那么我希望我的背景只显示其0.5x0.6px的部分，而不是整个1x1px。

Answer 1

使用图片代码作为背景，为100%和width添加height，并在z-index的所有内容后面设置absolute定位并将其top和left设置为您需要的位置。

<img src="yourimage" width="100%" height="100%" style="z-index:0"/>

<强> Live Demo

Answer 2

在CSS3中，我们有一个名为background-size的新属性：

body {
    background-size: 100%;
}

Answer 3

寻找这个？

<div style="width:100%; z-index:0; height:100%; background: url(1pximage.gif)"></div>

Answer 4

您可以检测用户屏幕大小并执行此操作，也可以在修改窗口大小时附加事件处理程序以执行相同操作。

$(function(){

   $(window).resize(function(){

      var windowW = $(window).width();
      var windowH = $(window).height();

      //Using above variables you can deside the size of the background image to be set 
   }).resize();//Trigger the resize event on page load.
});

背景图像随屏幕大小而变化

4 个答案: