css - 多个背景图的尺寸问题？

Question

网页中要多个背景图这样

<style>
body{
background: url(/背景图1.png) bottom  right no-repeat,url(/背景图2.png) top  left no-repeat;
}
</style>

要使背景图1.png的背景图尺寸高度设为200px 宽度随高度变化 不改变宽高比
背景图2.png的尺寸不改变
该如何写？

Answer 1

background-image:url("1.jpg"),url("2.jpg");
background-repeat: no-repeat, no-repeat;
background-position:bottom right,top left; 
background-size:0 200px,0 0;

各个背景图的样式用,隔开既可

Answer 2

background-image:url("1.jpg"),url("2.jpg"),url("3.jpg");
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: 0 0, 100px 0, 200px 0;
...

Answer 3

您的要求太高，最好用JS实现，虽然也有background-size来定义背景的大小，但在chrome中实验发现，大小尺寸不是很正确，你可以尝试以下代码：

background-size:200px auto,auto auto;

为什么不把双背景拆分为一个img，一个p叠加呢？想来实现会简单的多。