使用CSS制作曲线形状

Question

嗨，我想在我网站的横幅图片上做一个灰色（＃444）曲线覆盖。我附上了我想要的图像。

Answer 1

这可以通过使用CSS Radial Gradients来实现。

您可以使用额外的div，也可以使用伪元素。

我已经使用了多个div来向您展示它们看起来如何构建在一起。

＆＃13;

＆＃13;

.container {
  width: 900px;
  height: 300px;
  position: relative;
}
.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: -webkit-radial-gradient(100% 21.875%, transparent 0%, transparent 20%, #444 45%);
  background: radial-gradient(at 100% 21.875%, transparent 0%, transparent 20%, #444 45%);
  background-size: 100% 225%;
}
.overlay .text {
  width: 50%;
  padding: 20px;
  color: white;
}

＆＃13;

<div class="container">
  <img src="http://lorempixel.com/900/300/" width="100%" height="auto" />
  <div class="overlay">
    <div class="text">
      <p>Some Text</p>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用多个背景和radial-gradient。 Here's an example.

编辑以下是该示例中的CSS。

#banner{
   width:400px;
   height:200px;
   background:radial-gradient(circle farthest-corner at 100% 50%,rgba(68,68,68,0) 60%,#444 70%),url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Sun-in-the-sky.jpg/800px-Sun-in-the-sky.jpg);
   background-size:cover;
}

Answer 3

绝对定位div作为叠加

使用叠加和绝对位置，您可以创建灰色叠加。

.container {
  position: absolute;
  display: inline-block;
  width: 400px;
  height: 200px;
  background-color: #444;
  background-image: url("http://www.lorempixel.com/400/200/");
  color: white;
  overflow: hidden;
}
.overlay {
  position: absolute;
  width: 70%;
  height: 150%;
  background: radial-gradient(ellipse at 100% 50%, transparent 40%,  #444 60%);
  top: -25%;
}
.container p {
  position: relative;
  margin-left: 2em;
}

<div class="container">
  <div class="overlay"></div>
  <p>Text</p>
</div>