时间戳

首页 > 解决方案 > 无法使对象位置起作用。我究竟做错了什么？

html - 无法使对象位置起作用。我究竟做错了什么？

问题描述

我正在尝试做一些非常简单的事情：静态背景和滚动的集中图像。它必须是所有内联样式，因为我想放它的地方只接受标签 api strong bu ul ol li h1 h2 h3 img font br span。

我的小代码目前是这样的：

<p style="background:url(https://i.pinimg.com/originals/ba/d4/6a/bad46a1f4e0259ea2ba5319318a74714.jpg); 
width:2000px; 
height:auto; 
left:0px; 
top:0px;  
z-index:-100;

background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom;">

<img src="https://i.imgur.com/2QwvWCt.png" style="
width: 700px;
height: auto;
object-position: center top;
z-index:1;"/>

</p>

但是“对象位置：中心顶部”的存在与否；似乎对图像根本没有影响。我究竟做错了什么？

标签： htmlcss

解决方案

object-position指元素相对于它自己的 box的位置，而不是在包含的父元素中。

所以我们有一个自然小于其指定尺寸的图像，然后对象位置开始发挥作用。

例如，将一个 300px 的图像设置为 500px 宽，object-fit: none;然后你会得到......

img {
  width: 500px;
  display: block;
  height: auto;
  object-position: top center;
  z-index: 1;
  border: 2px solid red;
  object-fit: none;
}
<img src="https://baconmockup.com/300/200" />

object-position CSS 属性指定所选替换元素的内容在元素框内的对齐方式。被替换元素的对象未覆盖的框区域将显示元素的背景。

您可以使用 object-fit 属性调整被替换元素的对象的固有大小（即其自然大小）如何调整以适应元素的框。

推荐阅读