Question

我在许多网站上看到了非常酷和微妙的效果，主要用于登陆页面。背景图像在整个屏幕上设置为fullsize，并根据屏幕尺寸（或更具体地说是屏幕高度）进行裁剪。

这example显示了我的意思。只需调整窗口大小即可看到效果。我不知道这种技术被称为什么，我肯定不知道如何编码。显然有Javascript和某种溢出：隐藏涉及。

任何线索......？

Answer 1

它是纯CSS，它使用背景大小，在IE8及更低版本中不受支持：

background: url(path/to/image.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Can I Use

Answer 2

@ APAD1是对的，所以这是不支持background-size的浏览器的另一种想法：

http://jsfiddle.net/coma/TS64y/

div {
    position: relative;
    width: 400px;
    height: 50px;
    overflow: hidden;
}

div img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -200px;
    z-index: -1;
}

请停止使用js。

检测屏幕高度并裁剪全尺寸图像

2 个答案: