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

Question

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

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;

任何帮助将不胜感激.无法相信设置背景图像对我来说有多复杂.

Answer 1

尝试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>