Question

我想在html和css中得到这个结果：

网格，其中单元格充当黄色圆圈的蒙版（请忽略虚线边框，他们只是为了帮助css，我不得不在白色空间中进行photoshop）

所以我的方法是制作9个浮动div并且每个都是一个圆圈，然后将圆圈绝对定位到父级＆lt; =容纳9个div的容器，以便它们都在同一个地方。然后使用溢出：隐藏在9个div上。

这是标记：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="gridCircle.css">
</head>
<body>

<div id="container">
    <div class="square">
        <div class="circle"></div>
    </div>
    <div class="square">
        <div class="circle"></div>
    </div>
    <div class="square">
        <div class="circle"></div>
    </div>
    <div class="square">
        <div class="circle"></div>
    </div>
    <div class="square">
        <div class="circle"></div>
    </div>
    <div class="square">
        <div class="circle"></div>
    </div>
    <div class="square">
        <div class="circle"></div>
    </div>
    <div class="square">
        <div class="circle"></div>
    </div>
    <div class="square">
        <div class="circle"></div>
    </div>

</div>



</body>
</html>

和css：

div#container {
    width: 24em;
    height: 24em;
    border: solid;
    margin: auto;
    margin-top: 8em;
    position: relative;
}

.square {
    border: dotted 1px;
    float: left;
    width: 30%;
    height: 30%;
    margin: 1.4%;
    overflow: hidden;
    z-index: -1;
}

.circle {
    position: absolute;
    background-color: yellow;
    border-radius: 100000em;
    width: 20em;
    height: 20em;
    top: 2em;
    left: 2em;
    z-index: -1;
}

这是我从中得到的结果：

问题是我不能使用overflow：隐藏如果我不把位置：相对于9个div。这样做会使圈子错位，因为现在它们相对于小div来定位

我如何实现目标？我的方法可以修复，还是应该以完全不同的方式进行？

PS：我可以使用transform:translate在JS中完成，但我觉得这可以通过css实现。

如何在css / position绝对和溢出隐藏中复制剪贴蒙版？

0 个答案: