css - 无法在多个图像背景上设置百分比大小

Question

我在这里有几个背景图片：

html{
background: top left no-repeat url(http://wallpapers.pupazzo.org/animals/Peek-a-Boo_%20Red%20Fox%20Kit.jpg),
top right no-repeat url(http://www.dcwild.com/images/Fox-Kit-Riverfarm.jpg);
background-size: 50% 400px, 50% 400px;
}

问题是当我尝试将 y 设置为100%它似乎不起作用。这些图像似乎是从整个页面以外的其他地方获得 100% 的测量值。有没有办法让我有两个图像作为背景并使用 CSS 将图像定位为100%？

这是进一步示例的小提琴。

Live Demo

先感谢您！

Answer 1

我认为（尽管我不是 100% 确定！）你是说这不起作用：

html{
    background: top left no-repeat url(http://wallpapers.pupazzo.org/animals/Peek-a-Boo_%20Red%20Fox%20Kit.jpg),
    top right no-repeat url(http://www.dcwild.com/images/Fox-Kit-Riverfarm.jpg);
    background-size: 50% 100%, 50% 100%;
}

这有一个看起来像这样的结果。

但是，如果将heightof设置html为100%，则可以正常工作：

html {
    background: top left no-repeat url(http://wallpapers.pupazzo.org/animals/Peek-a-Boo_%20Red%20Fox%20Kit.jpg), top right no-repeat url(http://www.dcwild.com/images/Fox-Kit-Riverfarm.jpg);
    background-size: 50% 100%, 50% 100%;
    height: 100%;
}

这有一个看起来像这样的结果。