Question

我阻止窗口宽度的17％作为响应。此块具有：以图像为背景。：具有图像高度和图像高度值的绝对负位置 - 因此它固定为ex。 82px。

我将背景大小设置为100％，当我调整浏览器块大小时，17％更改宽度也会改变背景，但绝对负位置和：高度不会改变。

image 81 x 320

问题：如何获得调整到块宽度的背景图像的高度，并将更改高度设置为绝对负位置？

＆＃13;

.side {
  width: 17%;
  height: 100px;
  background: #000;
  margin-top: 100px;
}
.side:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 82px;
  left: 0;
  top: -82px;
  background: url(/img/left-bar-blue-01.png) no-repeat;
  background-position: 50% 50%;
  background-size: 100%;
}

＆＃13;

<div class="side">

</div>

＆＃13;

Answer 1

您似乎希望:after - 元素始终位于相同的相对位置 - 这是正确的吗？如果是这样，你应该看一下这个article about Centering Percentage Width/Height Elements。

过去使用否定margin或top是一种常见方法。现在你可以/应该做这样的事情：

.side:before { /* other CSS properties */ transform: translateY(-100%); }

这取决于你的特殊情况，我真的不完全理解。

Css背景大小100％检测高度改变负绝对位置

1 个答案: