css无图像透明叠加

Question

我想使用CSS创建类似于附加图像的东西。 到现在为止，我已经提出：

.block5-header:after {
    content:"";
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    width:100%;
    background: url({template_relativeimagepath}{template_imagesfolder}blocks/elipsa.png) no-repeat;
    background-size: contain;
}

但是这个解决方案需要使用很多不同的png图像，因为我有许多不同大小的标题块。 我试图使用具有径向渐变的伪元素，但无济于事。 如果有一些更简单的解决方案请告诉我;）

Pic想要实现的目标。 http://i.imgur.com/pwN54o1.png

Answer 1

好吧，我使用了css position ， circles和rgba 。

纯CSS解决方案 （固定宽度）

它也响应宽度变化

HTML

<header class="subNav">
  <span class="headCirc"></span>
  Something
</header>

CSS

.subNav {
  width: 285px;
  height: 60px;
  overflow: hidden;
  background: #4679bd;
  display: block;
  position: relative;
  left: 30px;
  top: 30px;
  line-height: 60px;
  font-size: 20px;
  color: #fff;
  padding-left: 15px;
  border-radius: 10px 10px 0 0;
}

.headCirc {
  position: absolute;
  top: -30px;
  left: -5%;
  display: block;
  width: 110%;
  height: 70px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

我所做的是将圆圈放在标题内部，然后我给标题一个overflow: hidden以隐藏从框中出来的任何圆圈。

Answer 2

你不能得到曲线，但如果你不介意你可以尝试http://www.colorzilla.com/gradient-editor/