知道全屏背景图像的良好 CSS 技术吗？答案

【问题标题】：know of a good CSS-technique for a full-screen background image?知道全屏背景图像的良好 CSS 技术吗？
【发布时间】：2013-03-14 09:01:28
【问题描述】：

我在网上环顾四周并尝试了各种方法来解决这个问题，但还没有找到一种适合我的技术。我希望我的网站的背景图片居中，填满整个浏览器屏幕，并使用响应式设计。

除了 CSS3/background-size: 封面之外，还有什么简单的技巧吗？这对我来说根本不起作用（不知道为什么......）。

【问题讨论】：

请提供您的最佳尝试以及为什么它不起作用。
你想避免img标签吗？
这是我不久前发布的内容的链接。它解释了我正在使用的当前技术发生了什么...stackoverflow.com/questions/15604771/…
我没有任何理由避免使用 img 标签，所以请随时提出建议！
这个答案对你有用吗？ stackoverflow.com/questions/15594116/…

标签： html image css background-image

【解决方案1】：

如果您不反对除了 CSS 之外还涉及 HTML 的解决方案，您可以使用 img 标记模拟 background-size: cover 行为。

HTML：

<body>
    <div id="image-matte">
        <img src="..."/>
    </div>

    ... Page content below ...

</body>

CSS：

#image-matte {
    position: fixed;
    top: 0%;
    left: -50%;
    width: 200%;
    height: 200%;
}

#image-matte img {
    display: block;
    margin: auto;
    min-height: 50%;
    min-width: 50%;
}

/* Covers the image to prevent pointer interaction */
#image-matte:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

编辑：要获得垂直和水平居中的背景图像，您需要在包装 div 和包含图像本身的内部 div 之间创建表格/表格单元格关系。 .. HTML 和 CSS 看起来像这样：

HTML：

<div id="image-matte">
    <div>
        <img src="..."/>
    </div>
</div>

CSS：

#image-matte {
    position: fixed;
    display: table;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    text-align: center;
}
#image-matte div {
    vertical-align: middle;
    display: table-cell;
}
#image-matte img {
    position: relative;
    text-align: center;
    min-height: 50%;
    min-width: 50%;
}

/* Covers the image to prevent pointer interaction */
#image-matte:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

工作示例：http://jsfiddle.net/qkpvb/

【讨论】：

这更接近我想要实现的目标。图像仍然向左推了 50%（左半部分不在视野范围内），空白区域占据了屏幕的右半部分。我通过删除绝对定位来解决这个问题，但我想这样做吗？进行此更改后，顶部已固定，但图像的底部仍被切断...
哎呀，我有几个流氓 CSS 宽度和高度属性。我已编辑我的答案以删除它们。
啊...感谢更新和修复。我越来越近了。图像现在很合身，除了一些鞋子在最底部被切断。我已经使用调试工具尝试了一些不同的选项，但到目前为止没有任何效果。目前使用的是 1100x800 像素的图像，但也有其他尺寸。这是分辨率问题吗？
这是因为图像的顶部与视口的顶部对齐。为了获得真正居中的图像，您需要使用display: table 和vertical-align: middle。让我创建一个 jsfiddle 来展示这种行为。
我明白了...尝试将它们应用于图像，但这不起作用。然后我尝试将它们应用于#image-matte div，以防万一你的意思是这样，这也不起作用。然后我想我应该等你创建 jsfiddle...

【解决方案2】：

LIVE DEMO

body{
  background:url(img.jpg) center center fixed;
  background-size:cover; // CSS3 *
}

^注意：CSS3。对于其他 old 浏览器，请尽可能使其丑陋！ ;)

【讨论】：

【解决方案3】：

为了在所有浏览器上都能正常工作，我建议使用 jQuery 这个解决方案：

HTML

<img src='./templates/lights3.jpg' alt="bg" id="bg"/>

CSS

#bg { 
    position: fixed; 
    top: 0; 
    left: 0;
    z-index: -5000; // Yes I always overdo ^^ (that's not very clean)
}

.bgwidth { 
    width: 100%;
}

.bgheight { 
    height: 100%;
}

JQUERY

$(window).load(function() {    
var theWindow        = $(window),
    $bg              = $("#bg"),
    aspectRatio      = $bg.width() / $bg.height();              
function resizeBg() {
    if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
        $bg
            .removeClass()
            .addClass('bgheight');
    } else {
        $bg
            .removeClass()
            .addClass('bgwidth');
    }           
}                           
theWindow.resize(resizeBg).trigger("resize");
});

此解决方案将响应并根据浏览器窗口的大小调整背景图像的大小。

【讨论】：

你的手机浏览器上JS激活了吗？
是的，我找到了一个解决方案 .. 一个名为 Supersize 的 jquery 插件。它实际上是一个完整的背景幻灯片插件，但它有一个精简的选项，仅用作全屏背景图像拉伸器。适用于我尝试过的所有浏览器，包括移动浏览器

【解决方案4】：

尝试在链接中的标签或css中添加这个html标签：

<img src="img/beach.jpg" 

style="width:100%;height:100%;position:absolute;top:0;left:0;z-index:-5000;">

http://thewebthought.blogspot.com/2010/10/css-making-background-image-fit-any.htmlg

【讨论】：