如何从SVG波内隐藏圆圈？
我有SVG波和一个圆圈。我需要从内部SVG隐藏圆圈。
我在SVG wave上设置了z-index: -3;，在圈子上设置了z-index:-1，例如div设置了z-index: 10;。
当用户滚动时，我必须从SVG内部隐藏该圆圈。请查看我的第二张图片。由于z-index，圆圈位于wave和example div之间。
我无法正确解释。希望你理解我的问题。
你能帮助我吗？
＆＃13;
＆＃13;
＆＃13;
＆＃13;
body {
margin: 0;
padding: 0;
}
.parent_div {
height: 600px;
width: 100%;
}
.about_wave_1 {
position: relative;
top: 0;
margin-top: 300px;
}
.about_wave {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(-180deg);
transform: rotate(180deg);
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
z-index: -3;
}
.ewSzGA path {
fill: #00a2ff;
}
.bg_blue {
background-color: #00a2ff;
text-align: center;
height: 200px;
}
.service-container {
border-radius: 10px;
position: fixed;
z-index: -1;
right: 0;
top: 30px;
opacity: 1;
}
.service_1 {
width: 200px;
height: 200px;
border-radius: 50%;
display: flex;
background-color: #EFBD40;
position: absolute;
right: 205px;
top: 0;
}
.service-container .service_1 h2 {
margin: auto;
color: #fff;
font-size: 28px;
}
.example {
background-color: #ff0000;
height: 300px;
width: 100%;
border: 1px solid #000;
z-index: 10;
}<div class="parent_div">
<div class="service-container">
<div class="service_1 logo_bg">
<h2>text</h2>
</div>
</div>
<div class="about_wave_1">
<div class="about_wave">
<svg height="50" viewBox="0 0 1440 50" xmlns="http://www.w3.org/2000/svg" class="sc-gqjmRU ewSzGA" data-reactid="208"><path d="M0 39.5062C144.0016 39.5062 144.0016 0 288.0032 0c143.9936 0 143.9936 39.5062 287.9873 39.5062C719.9842 39.5062 719.9842 0 863.9858 0s144.0016 39.5062 288.0032 39.5062C1295.9905 39.5062 1295.9905 0 1440 0v50H0V39.5062z" data-reactid="209"></path>
</svg>
</div>
</div>
<div class="example"></div>
</div>
我需要输出
4 个答案:
答案 0 :(得分：0)
您需要从position:absolute课程中删除.about_wave。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
body {
margin: 0;
padding: 0;
}
.parent_div {
height: 600px;
width: 100%;
}
.about_wave_1 {
position: relative;
top: 0;
margin-top: 300px;
}
.about_wave {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(-180deg);
transform: rotate(180deg);
bottom: 0;
top: 0;
left: 0;
right: 0;
z-index: -3;
}
.ewSzGA path {
fill: #00a2ff;
}
.bg_blue {
background-color: #00a2ff;
text-align: center;
height: 200px;
}
.service-container {
border-radius: 10px;
position: fixed;
z-index: -1;
right: 0;
top: 30px;
opacity: 1;
}
.service_1 {
width: 200px;
height: 200px;
border-radius: 50%;
display: flex;
background-color: #EFBD40;
position: absolute;
right: 205px;
top: 0;
}
.service-container .service_1 h2 {
margin: auto;
color: #fff;
font-size: 28px;
}
.example {
background-color: #ff0000;
height: 300px;
width: 100%;
border: 1px solid #000;
z-index: 10;
}<div class="parent_div">
<div class="service-container">
<div class="service_1 logo_bg">
<h2>text</h2>
</div>
</div>
<div class="about_wave_1">
<div class="about_wave">
<svg height="50" viewBox="0 0 1440 50" xmlns="http://www.w3.org/2000/svg" class="sc-gqjmRU ewSzGA" data-reactid="208">
<path d="M0 39.5062C144.0016 39.5062 144.0016 0 288.0032 0c143.9936 0 143.9936 39.5062 287.9873 39.5062C719.9842 39.5062 719.9842 0 863.9858 0s144.0016 39.5062 288.0032 39.5062C1295.9905 39.5062 1295.9905 0 1440 0v50H0V39.5062z"
data-reactid="209"></path>
</svg>
</div>
</div>
<div class="example"></div>
</div>
答案 1 :(得分：0)
尝试以下方式，我已经为这两个类添加了内联样式.about_wave_1，.about_wave，检查一次可能会对你有帮助，为parent_div添加样式
<div class="parent_div">
<div class="service-container">
<div class="service_1 logo_bg"><h2>text</h2></div>
</div>
<div class="about_wave_1" style="background:#fff;z-index:9999;">
<div class="about_wave" style="background:#fff;z-index:9999;">
<svg height="50" id="wave" viewBox="0 0 1440 50" xmlns="http://www.w3.org/2000/svg" class="sc-gqjmRU ewSzGA" data-reactid="208"><path d="M0 39.5062C144.0016 39.5062 144.0016 0 288.0032 0c143.9936 0 143.9936 39.5062 287.9873 39.5062C719.9842 39.5062 719.9842 0 863.9858 0s144.0016 39.5062 288.0032 39.5062C1295.9905 39.5062 1295.9905 0 1440 0v50H0V39.5062z" data-reactid="209"></path></svg>
</div>
</div>
<div class="example"></div>
</div>gem install mysql2 -v '0.4.10'
答案 2 :(得分：0)
我想你想要这个：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
body{
margin: 0;
padding: 0;
}
.parent_div{
height: 600px;
width: 100%;
position: relative;
}
.parent_div:before {
content: "";
width: 100%;
height: 20px;
display: block;
position: absolute;
top: -20px;
left: 0;
background: #00a2ff;
z-index: -2;
}
.about_wave_1{
position: relative;
top: 0;
margin-top: 300px;
}
.about_wave{
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(-180deg);
transform: rotate(180deg);
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
z-index: -3;
height: 50px;
background-color: #fff;
}
.ewSzGA path{
fill: #00a2ff;
}
.bg_blue{
background-color:#00a2ff;
text-align: center;
height: 200px;
}
.service-container{
border-radius: 10px;
position: fixed;
z-index: -1;
right: 0;
top: 30px;
opacity: 1;
}
.service_1{
width: 200px;
height: 200px;
border-radius: 50%;
display: flex;
background-color: #EFBD40;
position: absolute;
right: 205px;
top: 0;
}
.service-container .service_1 h2{
margin: auto;
color: #fff;
font-size: 28px;
}
.example{
background-color: #ff0000;
height: 300px;
width: 100%;
border:1px solid #000;
z-index: 10;
}
object {
position: relative;
z-index: 2;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class="parent_div">
<div class="service-container">
<div class="service_1 logo_bg"> <h2>text</h2></div>
</div>
<div class="about_wave_1" style="background:#fff;z-index:9999;">
<div class="about_wave" style="background:#fff;z-index:9999;">
<svg height="50" id="wave" viewBox="0 0 1440 50" xmlns="http://www.w3.org/2000/svg" class="sc-gqjmRU ewSzGA" data-reactid="208"><path d="M0 39.5062C144.0016 39.5062 144.0016 0 288.0032 0c143.9936 0 143.9936 39.5062 287.9873 39.5062C719.9842 39.5062 719.9842 0 863.9858 0s144.0016 39.5062 288.0032 39.5062C1295.9905 39.5062 1295.9905 0 1440 0v50H0V39.5062z" data-reactid="209"></path>
</svg>
</div>
</div>
<div class="example"></div>
</div>
答案 3 :(得分：0)
我认为你使它变得比它需要的更复杂。
我简化了一些例子。然后我所做的就是将SVG变成两个半SVG。一个用于波浪的顶部，一个用于底部。然后我只用<button type="button" id="lbtnStatus"><span class="label-success">Active</span></button>
<script type="text/javascript">
$(document).ready(function () {
$('#lbtnStatus').click(function () {
if ($(this).find('span').hasClass("label-success"))
$(this).find('span').removeClass("label-success").addClass("label-danger").text("InActive");
else
$(this).find('span').removeClass("label-danger").addClass("label-success").text("Active");
});
});
</script>
将上半部分放在后面。
z-index: -1body {
margin: 0;
padding: 0;
}
.parent_div {
height: 600px;
width: 100%;
}
.about_wave_1,
.about_wave_2 {
position: relative;
}
.about_wave_1 {
margin-top: 250px;
z-index: -1;
}
.about_wave_1 svg,
.about_wave_2 svg {
display: block;
}
.ewSzGA path {
fill: #00a2ff;
}
.service-container {
position: fixed;
right: 0;
top: 30px;
}
.service_1 {
width: 200px;
height: 200px;
border-radius: 50%;
display: flex;
background-color: #EFBD40;
position: absolute;
right: 205px;
top: 0;
}
.service-container .service_1 h2 {
margin: auto;
color: #fff;
font-size: 28px;
}
.example {
position: relative;
background-color: #ff0000;
height: 300px;
width: 100%;
border: 1px solid #000;
z-index: 10;
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？