上面的图像是我想要创建的但是在椭圆形状上有一些困难.一个解释:
>菜单栏是一个带有轻微线性渐变的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,0.8) 50px); }
对切口形状和渐变进行排序时,徽标将位于顶部.
编辑2:通过稍微改变设计解决了问题,感谢那些回复的人.我写了一些jquery来解决这个问题 – 当彩色区域滚出视图时,椭圆边框和标题边框会拾取顶部的颜色,而不是透明度.
解决方法
你可以从这个
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) 50px); height: 10em; } .island > div { position: absolute; left: 80px; right: 80px; top: 30px; bottom: 30px; background: rgba(fff,0.2); padding: 5px; text-align: center; } #circleText { padding-top: 30px; font-size: 1.5em; }
原文地址:https://www.jb51.cc/jquery/241401.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。