CSS

Question

.baner {
    background-image: url('ban.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    position: fixed;
    width: 100%;
    height: 35%;
    top: 60px;
}

不会在这个背景上做封面，但是当我做 png 图片时它起作用了，我不明白为什么：

.baner {
    background-image: url('ban.png');
    background-size: cover;
    background-repeat: no-repeat;
    position: fixed;
    width: 100%;
    height: 35%;
    top: 60px;
}

Answer 1

对我来说效果很好，也许你没有将图像保存为 .jpg 或其他...

div.one {
    width:100px;
    height:100px;
    background-image:url(http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg);
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
}
div.two {
    width:500px;
    height:500px;
    background-image:url(http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg);
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
}

<div class="one">
    
</div>
<div class="two">
    
</div>

CSS - 背景大小不适用于 jpg 扩展

CSS - Background-size not working on jpg extension

background-size