背景大小之间的差异

Question

在工作期间，我发现使用background-size时有一些有趣的区别：

html,body{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.wrap{
    position: relative;
    z-index: auto;
    width: 960px;
    height: 100%;
    margin: 0 auto;
}
#main{
    width: 100%;
    height: 50%;
}
main{
    max-width: 100%;
    height: 100%;
    background: url(images/img-main.png) no-repeat center;
    background-size: 100% 100%;
}

所以，现在当我使用background-size：100％100％;它完美但背景大小：100％;不起作用100％100％。

---

背景尺寸：100％100％

背景尺寸：100％

---

但我认为background-size: 100%;的作用是background-size: 100% 100%;。那么，他们真的有区别吗？为什么这种方式有所不同？

Answer 1

background-size：100％表示100％定义图片的宽度，高度隐式设置为＆＃39; auto＆＃39;

background-size：100％100％将高度和宽度设置为100％。

背景尺寸：100％与背景尺寸：100％100％

之间存在差异

IE9 +，Firefox，Opera，Chrome和Safari支持background-size属性。

Answer 2

使用background-size: 100% 100%;表示x和y分别设置为100%，当您使用background-size: 100%;设置width时{ {1}}和100%为height

来自MDN：

  

单值语法：该值定义图像的宽度，高度   隐式设置为“自动”

---

尽管如此，MDN建议忽略使用auto auto属性...

原因：

  

请注意，建议不要使用像素尺寸   和带梯度的自动尺寸，因为它是不可能的   在8之前的Firefox版本和浏览器中复制渲染   在不知道确切大小的情况下，没有实现Firefox 8的渲染   指定背景的元素。

^{致谢：Mozilla开发者网络}

Answer 3

＆＃34; 百分比以父元素的百分比设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只给出一个值，则第二个值设置为＆＃34; auto＆＃34; ＆＃34;

reference

是。有意思:)）