如何设置 div 的背景图片以包含边距

Question

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

这是我的代码。您也可以 see/interact 在 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

实际上保证金从边界外离开 space 所以理论上这是不可能的，但我们可以使用伪类来克服它。请参阅以下 link 我更新了您的 css [此处][1]。

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

如何设置 div 的背景图片以包含边距

How do I set the background image of a div to include the margins

html

css

material-design-lite