设置object-position无效果，使用内联样式实现背景滚动效果时哪里出错？

核心问题点 #

• object-position 生效前提是同时配置object-fit属性，且<img>标签定义的盒子尺寸和图片原始尺寸不匹配（存在内容溢出或留白）。你当前代码中<img>设置为width:700px;height:auto，图片会等比例缩放完全填充标签盒子，没有调整内容位置的空间，因此该属性不会生效。
• 你当前使用的left、top、z-index属性均要求元素设置非static的position属性才能生效，你的父元素<p>未配置position属性，上述属性全部无效。
• 你要实现的图片水平居中效果不需要使用object-position，调整布局属性即可实现。

修正后代码 #

<p style="
  background:url(https://i.pinimg.com/originals/ba/d4/6a/bad46a1f4e0259ea2ba5319318a74714.jpg); 
  width:100%; 
  min-height:100vh;
  margin:0;
  padding:30px 0;
  position:relative;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: bottom;
  background-size: cover;
">
  <img src="https://i.imgur.com/2QwvWCt.png" style="
    display:block;
    width: 700px;
    max-width:95%;
    height: auto;
    margin:0 auto;
  "/>
</p>

调整说明 #

• 父元素<p>新增position:relative确保定位、层级属性可生效，将固定宽度2000px改为100%避免小屏幕横向溢出，新增min-height:100vh保证背景图撑满整个视口高度，新增background-size:cover保证背景图适配容器尺寸。
• <img>新增display:block、margin:0 auto实现水平居中，新增max-width:95%适配移动端显示，移除无效的object-position属性。

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