使用 CSS/jquery 或 Flash 的完整图像背景？答案

【问题标题】：Full Image Background with CSS/jquery or Flash?使用 CSS/jquery 或 Flash 的完整图像背景？
【发布时间】：2023-03-14 17:11:01
【问题描述】：

如何用大图像填充整个背景？照片是 1400*867，使用解决方案 here 它会填满宽度但不会填满高度。我不在乎照片是否也被裁剪以填充高度。

CSS3 方式（背景大小）是完美的，但在 IE 中不起作用。

如果您不知道使用 css/jquery 的方法，您能否指导我使用 flash 脚本，我可以在其中输入图像的路径并让 flash 调整它的大小？

谢谢！

【问题讨论】：

标签： jquery css flash

【解决方案1】：

看看这个 jQuery 插件：

http://nanotux.com/blog/fullscreen/

我认为这就是您要寻找的；希望对你有帮助！

【讨论】：

非常感谢，会检查并告诉您进展如何。 :D

【解决方案2】：

你可以试试SuperSized

【讨论】：

【解决方案3】：

试试这个：

HTML：

<div id="wrapper">

   <!--bg-img-->
   <div class="bg-img>

       <img src="images/bg.jpg"/>

   </div>
   <!--bg-img-->

</div>

CSS：

.bg-img{
    /*--sets rules to fill browser window in width and height--*/
    min-height: 100%;
    min-width: 1024px;

    /*--sets proportionate scaling--*/
    width: 100%;
    height: auto;

    /*--positioning and layering of image container--*/
    position: fixed;
    top: 0;
    left: 0;
    z-index:-5;
}

我相信你说的CSS3方法是这样的？：

.bg-img{
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

嗯，您可以尝试一种针对 IE 的解决方法，但它并非万无一失。您可以尝试将整个 sn-p 更改为此：

.bg-img{
    /*--CSS3 compatible browsers setup--*/
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    /*--work around for IE--*/
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.bg.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale')";
}

祝你好运！希望它有效！

【讨论】：