如何在CSS中调整多张云背景图的位置 避免相互重叠

问题根因 #

你代码里的background-position属性误用了cover值导致解析异常。cover是background-size的专属属性值，不能用于定义背景位置，多背景的位置参数要和background-image的声明顺序一一对应，错误的参数会导致前两个云图的位置规则失效，出现重叠。

修正方案 #

调整background-position的第三个参数为底层背景图的位置值即可，如果你希望10%占比的小云固定在页面右侧，修正后的完整CSS代码如下：

@charset "utf-8";
/* CSS Document */

/* 适配云图和底层背景样式 */
body
{
  background-image: url("Image/cloud.png"),url("Image/cloud.png"), 
  url("Image/FreshFarmsBG.jpg");
  background-repeat: no-repeat;
  background-size: 10%,20%, cover;
  /* 参数顺序对应三张背景图：小云右上、大云左上、底层背景居中 */
  background-position: top right, top left, center;
  height: auto;
} 

如果需要调整云图和边界的间距，可以修改位置参数增加偏移量，比如想让小云距离顶部20px、距离右侧40px，把第一个位置值改为top 20px right 40px即可。

内容的提问来源于stack exchange，提问作者Billy Madison