CSS背景不尊重宽度

具有主体具有最大宽度和一个“盖”的背景图像宽度CSS背景不尊重宽度

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

图像不看车身宽度，但在视口的宽度，而不是（FF ，Chrome和IE）。有没有解决的办法？

http://jsfiddle.net/tAB2S/

来源

2013-07-05 mh543

一种选择是一个最大宽度添加到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; 
     }

来源

2013-07-05 09:29:28

哇，你是对的。我不知道你可以做到这一点。特别是，我很惊讶我仍然可以为整个视口设置背景颜色。所以在某种程度上，'body'的'background-image'适用于'html'的整个宽度。而'html'的'background-color' /'background-image'适用于视口。奇怪，但在浏览器中保持一致。 http://jsfiddle.net/tAB2S/4/ – mh543

我的答案不是最好的方法，但现在至少你知道的HTML类。 @KhanhTO的回答是更好一点，我认为:) –

哦，只是看到你的编辑。所以我的回答在你的情况下更好？ –

 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

来源

2013-07-05 09:28:18

对不起，先生。 “包含”和“封面”是两个相当不同的概念。在我的例子中，意外宽度和高度是300px，但其中一个或另一个可能更大。 – mh543

@ mh543：我确实认为你的问题是关于如何使图像**包含在身体内。我是否正确理解您的要求？ –

是的，没有。我希望图像被包含（即不要在盒子外面延伸），而是要填充整个盒子（不是“包含”，而是“覆盖”）。奇怪的是，'background-size：contains'会查看任何div的元素宽度，但对于body来说行为不同（在Fiddle的CSS中将'body'更改为'div'以查看差异）。 – mh543

尝试增加

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

感谢 AB

来源

2013-07-05 09:42:10

为什么要这样工作？你能提供一个jsfiddle吗？ –

CSS背景不尊重宽度

回答

相关问题