1

我想只使用 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 图像，因为我有很多不同大小的标题块。我曾尝试使用具有径向渐变的伪元素，但无济于事。如果有更简单的解决方案，请告诉我；）

我想要实现的图片。http://i.imgur.com/pwN54o1.png

4

2 回答 2

3

好吧，我使用了 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以隐藏从盒子中出来的圆圈的任何内容。

于 2013-10-24T13:52:30.787 回答
0

您将无法获得曲线，但如果您不介意可以尝试http://www.colorzilla.com/gradient-editor/

于 2013-10-24T13:40:17.240 回答