css无图像透明叠加

Question

I would like to create something like on attached image using only CSS. Until now I have come-up with:

.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;
}

But this solution requires to use a lot of different png images, as i have many different sizes of header blocks. I have tried to use pseudo elements with radial gradients, but to no avail. If there is some simpler solution please let me know ;)

Pic of what i would like to achieve. http://i.imgur.com/pwN54o1.png

Answer 1

Alright, I used css position , circles , and rgba .

Pure CSS Solution (Fixed width)

It is also responsive to width changes

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%;
}

What I did was positioned the circle absolutely inside of the header, I then gave the header an overflow: hidden to hide anything of the circle that came out of the box.

Answer 2

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