6

目标

上图是我正在尝试创建的，但椭圆形有一些困难。一个解释：

  • 菜单栏是一个带有轻微线性渐变的 div（深灰色到透明的浅灰色）
  • 公司徽标图像具有透明背景，将位于菜单栏的“顶部”
  • 椭圆形切口需要与徽标的椭圆形相匹配，并在其之间留出透明间隙，以显示背景颜色（每个页面都会更改，橙色只是一个示例）

我已经尝试过多次使用径向渐变但都失败了 - 我能够切出一个圆圈，但无法弄清楚如何使它变成椭圆形，然后无法让线性渐变起作用。见代码：

.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 来解决这个问题 - 当彩色区域滚动到视野之外时，椭圆形边框和标题边框将拾取顶部的颜色，而不是透明度。

在此处输入图像描述

4

5 回答 5

5

你可以从这个开始Running Demo

注意：我添加了一个小动画来更改背景颜色，以明确岛和带有切口的 div 之间的空间是真正透明的。

HTML

<div class="cutout">
    <div class="island">
        <div id="circleText">Circle Text </div>
    </div>
</div>

CSS

.cutout {
    height: 10em;
    background: radial-gradient(ellipse 200px 150px at 50% 100%, 
                                transparent 100px, #555 50px);
    position: relative;
}
.island {
    position: absolute;
    left: calc(50% - 150px);
    bottom: -50%;
    width: 300px;
    background: radial-gradient(ellipse 200px 150px at 50% 50%, 
                                silver 90px, rgba(0, 0, 0, 0) 50px);
    height: 10em;
}
.island > div {
    position: absolute;
    left: 80px;
    right: 80px;
    top: 30px;
    bottom: 30px;

    background: rgba(fff, 0, 0, 0.2);
    padding: 5px;    
    text-align: center;    
}

#circleText {
    padding-top: 30px;
    font-size: 1.5em;
}
于 2013-09-17T15:24:43.130 回答
2

试试这个：

background: radial-gradient(ellipse at 50% 100%, transparent 50px, rgba(84, 82, 94, 0.8) 50px);

jsfiddle在这里

于 2013-09-16T21:27:08.650 回答
1

试试这个：http ://css-tricks.com/the-shapes-of-css/

将其绝对放置在菜单其他部分的顶部

于 2013-09-16T14:53:13.083 回答
1

您可以合成 3 个背景，中心是径向的，侧面是线性的。

然而，要使这两种渐变完全匹配是很困难的；只有在渐变非常平滑的情况下才可行。

.back {
    height: 100px;
    width: 1000px;
    padding: 0px;
    background-image: radial-gradient(200px 100px ellipse at 50% 100%, transparent 70px, 
               rgba(100, 100, 100, 0.8) 73px, 
               rgba(80, 80, 80, 1) 198px), 
    linear-gradient(180deg, rgb(80, 80, 80), rgba(100, 100, 100, 0.8)), 
    linear-gradient(180deg, rgb(80, 80, 80), rgba(100, 100, 100, 0.8));
    background-size: 200px 100px, 40% 100%, 40% 100%;
    background-repeat: no-repeat;
    background-position-x: 50%, 0%, 100%;
    background-position-y: 100%;
}

演示

于 2013-09-16T19:49:08.900 回答
1

你可以这样做：

.container{
    height: 10em;
    background: #76757e;
}

.ovalCutout{
    background:white;
    height:50px;
    width:100px;
    border-radius:50%;
    margin:0px auto;
    position:relative;
    top:120px;
}

http://jsfiddle.net/UwXKu/

于 2013-09-16T15:22:01.977 回答