当前位置：文江博客话题详情

中心小猫？在 jsFiddle 中！强制背景下降

发布于 2024-11-28 12:26:52 字数 346 浏览 1 评论 0原文

http://jsfiddle.net/TurtleWolf/P7xKm/

中心小猫？在 jsFiddle 中？

所以我只想背景图像不要低于 html 的其余部分。这是埃文在第二个链接中已经帮助我做的事情的后续...因此图像将调整到任何窗口的大小，但现在它不充当背景图像...html5 中的最佳实践是什么对于这种情况？

原文

分享到QQ

分享到微博

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

发布评论

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

摇划花蜜的午后 2024-12-05 12:26:52

此处更新了方法： http://jsfiddle.net/irama/P7xKm/24/

打破它向下...

您想要添加一个内容层：

<div id="content">
    <p>Hello kitty!</p>
</div>
<div id="container">
   <img src="http://placekitten.com/g/200/300" class="bg_image" />   
</div>

然后您想要从文档流中取出“容器”元素，以便您可以将内容分层在顶部：

.bg_image {
    width: 100%;
}

#container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

#content {
    position: relative;
    z-index: 2;
    background-color: #fff;
}

然后您可以根据需要选择或保留 JavaScript图像垂直是否居中。

Updated approach here: http://jsfiddle.net/irama/P7xKm/24/

Breaking it down...

You want to add a content layer:

<div id="content">
    <p>Hello kitty!</p>
</div>
<div id="container">
   <img src="http://placekitten.com/g/200/300" class="bg_image" />   
</div>

Then you want to take the 'container' element out of the document flow, so you can layer content on top:

.bg_image {
    width: 100%;
}

#container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

#content {
    position: relative;
    z-index: 2;
    background-color: #fff;
}

You can then either take or leave the JavaScript depending on whether you want the image vertically centred or not.

回复收藏 0 原文

无需解释 2024-12-05 12:26:52

鉴于图像的高度可能会发生变化，因此当窗口大小发生变化时，您需要 JavaScript 来重新计算位置。

将其扔到 jsfiddle 中的 JavaScript 区域并设置“nowrap (body)”：

$(function(){
    $('.bg_image').centerVertically();
    $(window).resize(function(){
        $('.bg_image').centerVertically();
    });
});

$.fn.centerVertically = function() {
    $(this).css('margin-top', $(window).height()/2 - $(this).height()/2);
};

请参阅：http://jsfiddle .net/irama/P7xKm/22/

或者，对于 jsfiddle 之外的情况，请在结束之前添加此内容标签：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script>

    $(function(){
        $('.bg_image').centerVertically();
        $(window).resize(function(){
            $('.bg_image').centerVertically();
        });
    });

    $.fn.centerVertically = function() {
        $(this).css('margin-top', $(window).height()/2 - $(this).height()/2);
    };

</script>

Given that the height of the image can change, you'll need JavaScript to recalculate the position when the window size changes.

Throw this in the JavaScript area in jsfiddle and set 'nowrap (body)':

$(function(){
    $('.bg_image').centerVertically();
    $(window).resize(function(){
        $('.bg_image').centerVertically();
    });
});

$.fn.centerVertically = function() {
    $(this).css('margin-top', $(window).height()/2 - $(this).height()/2);
};

See: http://jsfiddle.net/irama/P7xKm/22/

Or, for outside of jsfiddle, add this before your closing <body> tag:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script>

    $(function(){
        $('.bg_image').centerVertically();
        $(window).resize(function(){
            $('.bg_image').centerVertically();
        });
    });

    $.fn.centerVertically = function() {
        $(this).css('margin-top', $(window).height()/2 - $(this).height()/2);
    };

</script>

回复收藏 0 原文

~没有更多了~