html - 如何设置 div 的背景图像以包括边距

Question

我正在尝试设置 DIV 的背景图像，使其覆盖整个 div，包括边距。我正在使用 Material Design Lite 框架，并尝试设置 mdl-cell 类的 div 的图像背景，所以看起来我有一个图像网格，中间没有间隙。去掉边距是行不通的，因为 MDL 在计算 div 的宽度时会考虑边距，而更正它会涉及修改过多的 MDL。

这是我的代码。您还可以在 this 中查看/与之交互

.project{
    background-image:url(https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg);
    height:200px;
}

<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue_grey-blue.min.css" />
<div class="project-holder mdl-grid">
    <div class="project mdl-cell mdl-cell--3-col" id="cell1">hi</div>
    <div class="project mdl-cell mdl-cell--3-col" id="cell2">hi</div>
    <div class="project mdl-cell mdl-cell--3-col" id="cell3">hi</div>
    <div class="project mdl-cell mdl-cell--3-col" id="cell4">hi</div>
</div>

Answer 1

实际上 margin 离开了边界之外的空间，所以理论上这是不可能的，但我们可以使用伪类来克服它。请参阅以下链接我更新了您的 css [此处][1]。

  [1]: https://jsfiddle.net/h1madb61/2/