css - 如何使用css隐藏svg图像内的矩形部分
问题描述
我想隐藏 svg 图像内矩形的顶部。怎么做?我尝试使用绝对我没有得到预期的结果。我已经制作了两个绝对的 svg 图像,现在我想隐藏圆形 svg 图像内矩形的最顶部。
预期结果应该是这样的:
我是这样的:
HTML 代码:
<div class="customer">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-3">
<div class="types">
<div class="term">
<h3>Term Insurance</h3>
</div>
<img src="abc.svg" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS Code:
.customer {
height: 200px;
padding: 30px 0;
}
.types {
margin-left: 100px;
}
.types img {
position: absolute;
top: 113px;
left: 218px;
}
.types::before {
display: block;
content: '';
background: url('dotted.svg');
background-repeat: no-repeat;
height: 250px;
width: 260px;
overflow: hidden;
}
.types::after {
content: '';
width: 250px;
height: 478px;
border-radius: 17px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
background-color: #ffffff;
position: absolute;
}
.term {
width: 259px;
height: 102px;
position: absolute;
}
.term h3 {
font-size: 36px;
line-height: 1;
position: absolute;
top: -232px;
left: 45px;
}
解决方案
如果图像是,您可以使用例如position: absolute
下拉图像margin-bottom: -100px
推荐阅读
- django - 如何使用清晰的表单格式化 django-filters?
- apache-spark - 随着表的增长,写入分区的 Hive 表需要更长的时间
- .net - 删除 SQL Server CE
- javascript - 反应缩放平移捏抛出未定义的无法读取属性“limitToWrapper”
- c# - 玩家相对于相机方向的移动 C#
- c - 如何将变量数据传递到 libcurl 帖子正文?
- node.js - npm install 上的依赖错误(React magento)
- python - Base64 编码错误,需要类似字节的对象,而不是“str”
- python - 在两个不同的函数中使用相同的变量
- c - 如何在 C 中的 pthread 函数中将结构作为参数传递?