相关疑难解决方法(0)

上面的图像是我想要创建的但是在椭圆形状上有一些困难.一个解释:

• 菜单栏是一个带有轻微线性渐变的div(深灰色到透明浅灰色)
• 公司徽标图像有一个透明的bg,位于菜单栏的"ontop"上
• 椭圆形切口需要与徽标的椭圆形相匹配,并且在它们之间有透明的间隙,这将显示背景颜色(这在每页上都有变化,橙色只是一个例子)

我已经尝试过多次使用径向渐变 - 我能够得到一个圆形切出但无法弄清楚如何使其成为椭圆形,然后无法使线性渐变起作用.看代码:

.circle {
    height: 10em;
    background: radial-gradient(circle 50px at 50% 100%, transparent 50px, rgba(84, 82, 94, 0.8) 50px);
    background: -webkit-radial-gradient(50% 100%, circle, transparent 50px, rgba(84, 82, 94, 0.8) 50px);
}

对切​​口形状和渐变进行排序时,徽标将位于顶部.

任何建议或jsfiddle解决方案将不胜感激,谢谢!

编辑:jsfiddle 在这里

编辑2:通过稍微改变设计解决了问题,感谢那些回复的人.我写了一些jquery来解决这个问题 - 当彩色区域滚出视图时,椭圆边框和标题边框会拾取顶部的颜色,而不是透明度.

我正在尝试在 CSS 中创建以下布局。

这通常很容易做到，但是因为背景是一个图像（在我的图像中显示为渐变），我不能简单地在顶部添加一个绝对定位的 div 并为“切掉”着色。在过去的几个小时里，我一直在努力弄清楚如何做到这一点。

我已经查找了一些使用::before和::after伪选择器的示例，但是无法弄清楚如何在保持主要内容 div（蓝色）上的边框半径的同时做到这一点。

<div class="content">
<div class="header">
  <a class="left" href="#">LINK 1</a>
  <!--
  Stuck with how to position this so it clips
  <img class="logo" src="https://placehold.it/100x100">
  -->
  <a class="right" href="#">LINK 2</a>
</div>

<p>Some text content</p>

.content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 20px;
  background-color: blue;
  height: 300px;
  width: 400px;
  padding: 20px;
}

.header {
  position: relative;
  top: -50px;
  padding: 0 20px;
}

.header .right {
  float: right;
} …