代码之家 › 专栏 › 技术社区 › GoGoAllen

使用CSS的多个对象的敲除效果/剪辑路径

clip-path css html

GoGoAllen · 技术社区 · 6 年前

我想知道如何在css中为单个背景图像的多个div(创建为矩形)实现剪辑路径效果/淘汰效果(类似于photoshop中的剪辑路径?) 有没有CSS工具?我在代码中包含了一个示例图像。

https://imgur.com/a/dcADVca
代码笔: https://codepen.io/lucasenz/pen/MWYaZBJ

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>HELLO.</title>
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="main.css">
  </head>
  <body>
    <div class="header">
      <h1>HELLO</h1>
    </div>
    <div class="content">
<div class="row ">
  <div class="col rectangle">BOX ONE</div>
  <div class="col rectangle">BOX TWO</div>
</div>
<div class="row ">
  <div class="col rectangle">BOX THREE</div>
  <div class="col rectangle">4 of 6</div>
</div>
<div class="row ">
  <div class="col rectangle">5 of 6</div>
  <div class="col rectangle">6 of 6</div>
</div>
</div>
<img src="https://images.unsplash.com/photo-1568039955984-85273dd1cd2b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2134&q=80"/>
  </body>
</html>

CSS格式:

*{
  font-family: lato;
}
body{
  height: 100%;
}

h1{
  font-weight:900;
  letter-spacing: 0.2em;
  text-align: center;
  font-size: 4vh;

  margin-top: 4vh;
}

.content{
  width: 50%;
  height: 80vh;
align-items: center;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;

}

.rectangle{
  height: 18vh;
  width: 15vw;
  margin: 1.5vh 0.7vw;
  text-align: center;
  background-color: tomato;
  display: flex;
  align-items: center;
  justify-content: center;
}

0 回复 | 直到 6 年前

Itay Gal 6 年前

我会找一个简单的解决办法。创建一个以图像为背景的容器,并通过在容器内创建带有白色边框的透明div来绘制分隔线。

.cont{
  display: flex;
  flex-wrap: wrap;
  width: 560px;
  height: 300px;
  background-image: url("https://cnet4.cbsistatic.com/img/pI-Oq4fGqthDVMMMuyL2ZMnaC5I=/2019/11/01/1e902743-2ee4-4c22-9b66-0b396596b13e/20190701-154228.jpg");
  background-size: cover;
}

.box{
  flex-basis: 28%;
  flex-grow: 1; 
  flex-shrink: 1;
  height: 46%;
  border: 10px solid white;
}

<div class="cont">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>