Question

我有一个背景图片，带有深色覆盖，并且我尝试使用border-radius来制作圆形底部，但是由于圆形圆圈外的黑色覆盖黑暗的覆盖层，所以我尝试使用剪辑路径，但是我做不到，所以请帮助我。 enter image description here

header{
    height: 70vh;
    background: url("../image/background1.jpg") no-repeat center center/cover;
    position: relative;
    border-bottom-left-radius: 30%;
    border-bottom-right-radius: 30%;    
}

Answer 1

尝试一下：

使用剪辑路径：

-webkit-clip-path: circle(60.0% at 50% 10%);
clip-path: circle(50.0% at 50% 50%);

使用边界半径：

  border-radius: 0 0 50% 50%;

Answer 2

.banner-section {
  text-align: center;
  padding: 100px 0;
  background: url(https://images.unsplash.com/photo-1556228720-d7519e2b88df?ixlib=rb-1.2.1&auto=format&fit=crop&w=1534&q=80);
  background-size: cover;
  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(70% at 50% 0);
  background-position: center center;
  background-repeat: no-repeat;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<section class="banner-section">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <p>Hi! I'm </p>
        <h1>Frontend Developer</h1>
      </div>
    </div>
  </div>
  </section>
</body>
</html>

希望该解决方案会有所帮助。作为参考，您可以通过下面的链接https://codepen.io/clairebones/full/dopzvv

Answer 3

使用隐藏的溢出

overflow:hidden;

Overflow MDN resource

如何使用剪辑路径/边框半径在CSS中制作圆形底部

3 个答案:

使用隐藏的溢出