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

时间:2017-12-30 05:05:04

标签: html css material-design-lite

我正在尝试设置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>

1 个答案:

答案 0 :(得分:1)

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

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