Question

拥有最大宽度和“封面”背景图像宽度的主体

body {
    max-width: 300px;
    background-image: ...;
    background-size: cover;
}

图像不会查看正文宽度，而是查看视口宽度（FF，Chrome和IE）。有办法解决这个问题吗？

http://jsfiddle.net/tAB2S/

Answer 1

        body {
            max-width: 300px;
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAABvUlEQVR42u2b2Y7DIAxFx4j//2XPQ6UoTUYdUDBeevxcNXB8vREiqvqDjVkDAbBMrP/7CxFZ9bDsId9HGK3a5ELuLp6Q4xn3neQSgpEnzhB6mUixWPnFAa1STqEaAgtYwMKABSxgAQtYwMKABSxgAQtYxex+mgisT3Y54AMWYZgXlulLHZQFrPxac1NWRl4+sJK+c2voaHzBDR2NL7tF816CMNy/7oxya9mDZTesMh32JmUhq0Ctw5/OUNVcomY2BBawvh1WrsLSE63V4ra5m7JEZM9N91cZ3V9J+9rNnPdg5PzX36ZX1sX59QbvZrEfuzDxLQhtIaaDlMWuRMS9dPb4Pj/7oGzrcB79Hm41SDtm25SqaqXzjB1N6f10YZxgqGOJTR38hc5Uto6jTZ9xZySdBTzqcpsNP3xBG3bM9h+kE1UAzrOABSxgAQtYGLCABSxgAauE8aHTo4kVWIQhsIAFLGBhwJqEle7WsLOy4EUYLp54gDUx8bx96EQkEobAcodFJE4rC14TsNDXKCy+0pxO8IiLagisjdapho9gkeZHwxBZTfdZcCHBl07w0e/Bh1pftAQqZChyFrC87Rc9QsO8Gm6jLgAAAABJRU5ErkJggg=="); 
            background-size: contain;
            background-repeat:no-repeat;
            border: 3px solid red;
        }
        body > div {
            height: 300px;
        }

不应使用background-size: cover;，请使用background-size: contain;和background-repeat:no-repeat;。

检查demo

Answer 2

一个选项是为html添加最大宽度。不仅是身体。

DEMO

html { max-width: 300px;}

body {
            max-width: 300px;
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAABvUlEQVR42u2b2Y7DIAxFx4j//2XPQ6UoTUYdUDBeevxcNXB8vREiqvqDjVkDAbBMrP/7CxFZ9bDsId9HGK3a5ELuLp6Q4xn3neQSgpEnzhB6mUixWPnFAa1STqEaAgtYwMKABSxgAQtYwMKABSxgAQtYxex+mgisT3Y54AMWYZgXlulLHZQFrPxac1NWRl4+sJK+c2voaHzBDR2NL7tF816CMNy/7oxya9mDZTesMh32JmUhq0Ctw5/OUNVcomY2BBawvh1WrsLSE63V4ra5m7JEZM9N91cZ3V9J+9rNnPdg5PzX36ZX1sX59QbvZrEfuzDxLQhtIaaDlMWuRMS9dPb4Pj/7oGzrcB79Hm41SDtm25SqaqXzjB1N6f10YZxgqGOJTR38hc5Uto6jTZ9xZySdBTzqcpsNP3xBG3bM9h+kE1UAzrOABSxgAQtYGLCABSxgAauE8aHTo4kVWIQhsIAFLGBhwJqEle7WsLOy4EUYLp54gDUx8bx96EQkEobAcodFJE4rC14TsNDXKCy+0pxO8IiLagisjdapho9gkeZHwxBZTfdZcCHBl07w0e/Bh1pftAQqZChyFrC87Rc9QsO8Gm6jLgAAAABJRU5ErkJggg==");
            background-size: cover;
            background-repeat: no-repeat;
            border: 3px solid red;
        }
        body > div {
            height: 300px;
        }

Answer 3

尝试添加

body
{
background-position:10px;
width:310px;
}

由于 AB

CSS背景在身体上不尊重宽度

3 个答案: