Question

我希望背景图像覆盖整个可用空间而不会被压扁实际上我认为background-size是什么意思，但我想我做错了，因为它不起作用，请帮助我。

HTML

<div class="myDiv">
    <p class="paragraph">Lorem Ipsum</div>
</div>

CSS

body {
    background-color: black;
}

.myDiv {
    color: white;
    background: url('http://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png') no-repeat center center fixed; 
    background-size: cover;
}

FIDDLE
http://jsfiddle.net/V7KSb/

Answer 1

只需将body和html设为100％高度，同样为div

body, html{
    height:100%;
    padding:0;
    margin:0;
}
.myDiv {
    color: white;
    background: url('http://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png') no-repeat center center fixed; 
    height:100%;
    padding: 20px;
    box-sizing: border-box;
}

请参阅小提琴：http://jsfiddle.net/V7KSb/5/

更新：给定myDiv一些填充并使用box-sizing: border-box;以确保它不会超过100％。

Answer 2

问题是背景是在div上而且div不够大。如果您必须拥有div的背景，请尝试以下方法：

.myDiv, body, html {
    width:100%;
    height:100%;
    padding:0;
    margin:0;
}

jsFiddle：http://jsfiddle.net/jdwire/V7KSb/3/

Answer 3

要在所有浏览器中达到div的100％高度，您需要将html和body设置为100％高度，但也应将以下样式应用于应该采用的div所有可用的高度：

min-height: 100%;
height: auto !important;
height: 100%;

Answer 4

尝试一下：

.myDiv:before {
                position: absolute;
                background: url(../images/ig.png);
                background-size: cover;
                width: 100%;
                height: 100%;
              }

CSS：100％宽度＆amp;高度背景图像不工作

4 个答案: