Question

嘿伙计们。我希望能够将我的图像背景定位为 www.wanderfly.com。该页面的来源显示它们使用隐藏的输入字段：

<input value="http://farm1.static.flickr.com/32/35826109_27e678ec45_b.jpg" id="backgroundImage" type="hidden"></input>

我试图寻找“backgroundImage”的CSS实现，却找不到它。然而他们使用的图像是1024：685，但他们想出了如何拉伸它以获得更高的分辨率，从而提供整洁的全屏显示。

我怎么能这样做？

Answer 1

使用img在html中添加id="background"。在你的CSS中写下这个：#background { width: 100%; position: absolute; top: 0; left: 0; }

演示： http://jsfiddle.net/XW9Pz/1/

Answer 2

他们拥有绝对定位的前景图像。

<div id="backstretch" style="left: 0px; top: 0px; position: fixed; overflow-x: hidden; overflow-y: hidden; z-index: -9999; ">
    <img style="position: relative; width: 969px; height: 643.4765625px; left: 0px; top: -63.23828125px; " src="http://farm3.static.flickr.com/2146/2428825658_c5f07a8f89_b.jpg">
</div>

Answer 3

如果您希望全屏背景图像可以延伸100％的显示器宽度和高度，而不会因为用户显示器是宽屏而被挤压或挤压，请尝试以下代码。它为我创造了奇迹。

<强> CSS：

img.bg {
    /* Set rules to fill background */
    min-height: 100%;
    min-width: 1024px;

    /* Set up proportionate scaling */
    width: 100%;
    height: auto;

    /* Set up positioning */
    position: fixed;
    top: 0;
    left: 0 ;
    z-index: -1;
}

@media screen and (max-width: 1024px){
    img.bg {
        left: 50%;
        margin-left: -512px; 
    }
}

HTML PAGE：

<asp:Image ID="imgBG" runat="server" CssClass="bg" ImageUrl="~/Sites/0/PageLayouts/Images/Background.jpg" />

如何定位像wanderfly.com这样的背景图片？

3 个答案: