css 在 div 之外显示图像 20 px

Question

我有一个关于 CSS 的问题。如何始终显示比父元素大 20px 的 div。因此，如果我更改尺寸，div 应该占宽度的 100%，然后每边增加 20px。

Answer 1

您可以使子 div 绝对定位到父级(假设它是 position: relative)

然后您可以设置子项以匹配父项的宽度和高度，然后通过添加填充和负定位值来“拉伸(stretch)”它以进行补偿...

请注意，红色方 block 是父方 block ，半透明覆盖层是子方 block 。

body {
  margin-top: 50px;
}
.parent {
  width: 200px;
  height: 200px;
  background: red;
  position: relative;
  margin: 0 auto;
}
.child {
  position: absolute;
  top: -20px;
  bottom: -20px;
  left: -20px;
  right: -20px;
  content: " ";
  background: rgba(0,0,0,0.4);
  padding: 20px;
  width: 100%;
  height: 100%;
}

<div class="parent">
  <div class="child">
  </div>
</div>

请注意:我确信有一种比我所做的更优雅的方式来实现这一点，但它似乎在任何情况下都有效!