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

实际上，边缘会从外部边界留下空间，所以理论上这是不可能的，但我们可以使用伪类来克服它。请参阅以下链接我更新了您的css [here] [1]。

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

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

1 个答案: