正文上的CSS背景与宽度无关

具有最大宽度和“覆盖”背景图像宽度的主体

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

图像不看主体宽度，而是看视口宽度（FF、Chrome和IE）。有办法解决这个问题吗

不应使用

背景尺寸：封面，使用
背景大小：包含和
背景重复：无重复

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


尝试添加

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

谢谢
哇，你说得对。我不知道你能做到。特别是，我感到惊讶的是，我仍然可以为整个视口设置背景色。因此，在某种程度上，
body
的
背景图像
适用于
html
的整个宽度。并且
html
的
背景色
/
背景图像
应用于视口。奇怪，但在不同浏览器之间是一致的。我的答案不是最好的方法，但现在至少你知道了html类@我认为KhanhTO的回答好一点：）不，对不起<代码>包含
和
封面
是两个截然不同的概念。在我的例子中，宽度和高度是300px，但其中一个可能更大。@mh543：我确实认为你的问题是关于如何制作包含在身体内的图像。我是否正确理解您的要求？是和否。我希望包含图像（即，不要延伸到框外），而是填充整个框（不是
包含
，而是
封面
）。奇怪的是，
background size:contain
查看任何div的元素宽度，但body的行为不同（在Fiddle的CSS中将
body
更改为
div
，以查看差异）。
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;
        }

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