背景尺寸:封面;实际上并没有拉伸图像?

时间:2014-10-12 23:44:43

标签: html css background-image positioning

嘿,我觉得我做错了,因为每个人都说你可以用以下方式拉伸图像:

background-size: cover;

但是当我使用它时,一两面都会被裁剪掉。我实际上想要一种方法来扭曲图像,使其伸展以适应任何屏幕。那可能吗?这是我尝试过的确切代码(我尝试过很多变化):

.carnival {
    background: url(../images/carnival.jpg) no-repeat 50% 50%;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    left: 0;
    right: 0;
    position: absolute;
}

HTML:

    <div class="carnival"></div>

出于某种原因,如果我删除以下任何内容,背景根本不会显示:

height: 100%;
left: 0;
right: 0;

非常感谢任何帮助。无法相信设置背景图片对我来说有多复杂。

1 个答案:

答案 0 :(得分:6)

尝试使用background-size: 100% 100%;代替cover

cover将导致背景图像缩放,以便填充块尺寸, 裁剪任何多余的宽度或高度取决于纵横比之间的不匹配 背景图像和应用图像的块。

body {
    margin:0;
}
.carnival {
    background: url(http://placekitten.com/700/1400) no-repeat;
    background-size: 100% 100%;
    height: 100%;
    left: 0;
    right: 0;
    position: absolute;
}
<div class="carnival"></div>