Css 背景位置

我正在制作降临节日历。。在此处测试代码笔：

HTML

我正在为日历使用一个固定的纵横比DIV，背景图像设置为background size:contain以填充该DIV。src图像的纵横比与DIV相同

门的绝对位置和大小使用%单位，因此日历响应迅速。我希望门具有相同的背景图像（我将使用transform3d打开它们，因此我需要在背景上进行复制）

示例门位于顶部：5%；左：5%；宽度：10%；身高：20%；背景尺寸：1000%

我本以为设置背景位置：5%5%会起作用，但经过反复试验，我发现5.6%6.4%才是需要的

---

知道为什么这些值不是我期望的吗？还是有更简单的方法来实现这一点？

编辑：问题似乎是我们无法获得图像与视口的所有纵横比的精确定位。填充底部是一个近似值-通常用于获得16:9的视频，但在这种情况下，我们没有非常整齐的数字作为图像的基本尺寸（1599x900）

我能得到的最接近的是这段代码。也许强迫图像更“正常”的大小可能会有所帮助，但我不认为这对于所有设备的纵横比都是可以的

<style>
* {
  --w: 1599; /* the width of the image */
  --h: 900; /* the height of the image */
  position:relative;
  margin:0;
  padding:0;
}

html, body {
  height:100%;
  width:100%;
}
.doorContainer { 
  width:100%; 
  height:100%; 
  padding:0; 
  margin:0; 
}
    
.doorOuter {
/*  padding-bottom:56.25%; *//* not accurate enough*/
}

.doors {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100vw;
  height: calc(calc(100vw * var(--h)) / var(--w)); /* this wont be absolutely accurate in most cases */
  background:url(https:/www.ultrabritain.com/TWDCCMSv5/EventClient/EventImages/tgd3423wsz_A8djF4Z5dg) no-repeat;
  background-size:contain;
}

.door {
  position:absolute;
  border:1px dashed #fff;
  background:brown url(https://www.ultrabritain.com/TWDCCMSv5/EventClient/EventImages/tgd3423wsz_A8djF4Z5dg);
  background-repeat:no-repeat;
}

.door1 {
  top:5%;
  left:5%;
  width:10%;
  height:20%;
  background-position:5.6% 6.4%;
  background-size:1000%; 
}

.door2 {
  top:15%;
  left:55%;
  width:10%;
  height:25%;
  background-position:61.2% 20.2%;
  background-size:1000%;
}
</style>
<div class='doorContainer'>
    <div class='doorOuter'>
      <div class='doors'>
        <div class="door1 door">  
        </div><div class="door2 door">  
        </div>
      </div>
    </div>
</div>

任何填充或边框现在都将包含在元素的宽度中

我不确定您是否需要设置浏览器用户代理可能引入的任何设置，但为了安全起见，值得将此设置放在CSS的顶部

   * {
     margin: 0;
     padding: 0;
   }

---

编辑：问题似乎是我们无法获得图像与视口的所有纵横比的精确定位。填充底部是一个近似值-通常用于获得16:9的视频，但在这种情况下，我们没有非常整齐的数字作为图像的基本尺寸（1599x900）

我能得到的最接近的是这段代码。也许强迫图像更“正常”的大小可能会有所帮助，但我不认为这对于所有设备的纵横比都是可以的

<style>
* {
  --w: 1599; /* the width of the image */
  --h: 900; /* the height of the image */
  position:relative;
  margin:0;
  padding:0;
}

html, body {
  height:100%;
  width:100%;
}
.doorContainer { 
  width:100%; 
  height:100%; 
  padding:0; 
  margin:0; 
}
    
.doorOuter {
/*  padding-bottom:56.25%; *//* not accurate enough*/
}

.doors {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100vw;
  height: calc(calc(100vw * var(--h)) / var(--w)); /* this wont be absolutely accurate in most cases */
  background:url(https:/www.ultrabritain.com/TWDCCMSv5/EventClient/EventImages/tgd3423wsz_A8djF4Z5dg) no-repeat;
  background-size:contain;
}

.door {
  position:absolute;
  border:1px dashed #fff;
  background:brown url(https://www.ultrabritain.com/TWDCCMSv5/EventClient/EventImages/tgd3423wsz_A8djF4Z5dg);
  background-repeat:no-repeat;
}

.door1 {
  top:5%;
  left:5%;
  width:10%;
  height:20%;
  background-position:5.6% 6.4%;
  background-size:1000%; 
}

.door2 {
  top:15%;
  left:55%;
  width:10%;
  height:25%;
  background-position:61.2% 20.2%;
  background-size:1000%;
}
</style>
<div class='doorContainer'>
    <div class='doorOuter'>
      <div class='doors'>
        <div class="door1 door">  
        </div><div class="door2 door">  
        </div>
      </div>
    </div>
</div>

任何填充或边框现在都将包含在元素的宽度中

我不确定您是否需要设置浏览器用户代理可能引入的任何设置，但为了安全起见，值得将此设置放在CSS的顶部

   * {
     margin: 0;
     padding: 0;
   }

---

谢谢你的回答！我确实将padding+margin设置为0，但忘记了框大小属性-我通常使用标准的重置css，当使用codepen之类的工具时，您不再需要复制基本内容！在这种情况下，它似乎没有改变布局，尽管这确实很奇怪——回到绘图板上（顺便说一句，我喜欢一个降临节日历的想法）。当背景填充包含的元素时，会有些奇怪。我不明白这个[链接]（还…）但是有什么是相关的，因为你有填充和超过填充他们的元素的背景吗？第三次尝试-底部的填充不能准确-即使我们去更多的小数位-这导致了一个问题，让纵横比准确无误。SO链接中的位置都很圆数字，而我有随机值！我已经移动了画笔中的第二扇门，我看不到预期偏移值与所需偏移值之间的任何关系。有趣的是，它看起来在FF，铬，甚至边缘ok！如果填充物在外面，我会认为随着窗户的大小调整，东西会破碎，但它仍然牢固。谢谢你的回答！我确实将padding+margin设置为0，但忘记了框大小属性-我通常使用标准的重置css，当使用codepen之类的工具时，您不再需要复制基本内容！在这种情况下，它似乎没有改变布局，尽管这确实很奇怪——回到绘图板上（顺便说一句，我喜欢一个降临节日历的想法）。当背景填充包含的元素时，会有些奇怪。我不明白这个[链接]（还…）但是有什么是相关的，因为你有填充和超过填充他们的元素的背景吗？第三次尝试-底部的填充不能准确-即使我们去更多的小数位-这导致了一个问题，让纵横比准确无误。SO链接中的位置都很圆数字，而我有随机值！我已经移动了画笔中的第二扇门，我看不到预期偏移值与所需偏移值之间的任何关系。有趣的是，它看起来在FF，铬，甚至边缘ok！如果填充物在外面，我会认为当窗口调整大小时，东西会碎，但它仍然是实心的

   * {
     margin: 0;
     padding: 0;
   }