我试图在图像上方创建文本叠加层,我想为其添加一个略微的边框半径。但是我注意到,当向父级添加border-radius: 5px
和overflow: hidden
时,叠加层后面的图像仍在底角处显示边框的一小部分,好像它忘记了在其中隐藏像素化线
.main-info {
box-shadow: 0px 0px 3px 2px #221b25c7;
border-radius: 5px;
font-size: 0.75rem;
overflow: hidden;
}
.main-info > .img {
position: relative;
}
.text {
position: absolute;
display: flex;
width: 100%;
bottom: 0;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
opacity: 1;
color: white;
background-color: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(3px);
z-index: 5;
line-height: 25px;
}
.text > .limit {
color: white;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: relative;
max-width: 100%;
width: 0;
padding: 0 0.5rem;
}
.text > .limit {
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="row m-5">
<div class="col-8">
<div class="main-info">
<div class="img">
<a href="#">
<div class="text">
<div class="limit">Hello World</div>
</div>
<img src="https://placehold.it/272x154" style="width: 100%">
</a>
</div>
</div>
</div>
</div>
我曾经考虑过将边界半径添加到孩子身上,但这会产生相同的结果。
答案 0 :(得分:0)
您是否尝试添加:“!important”?
overflow: hidden !important;
还是要清除缓存并重新加载页面?
Crtl + F5
答案 1 :(得分:0)
这比解决方案更像是一种技巧,但是如果您覆盖的5px x 5px角(广泛地)是单一颜色,将工作。
诀窍是将::before
和::after
伪元素绝对定位为覆盖角边缘,否则它们会发光。
工作示例:
.main-info {
position: relative;
box-shadow: 0px 0px 3px 2px #221b25c7;
border-radius: 5px;
font-size: 0.75rem;
overflow: hidden;
}
.main-info::before,
.main-info::after {
content: '';
position: absolute;
bottom: 0;
z-index: 12;
width: 5px;
height: 5px;
background-color: rgb(71, 71, 71);
}
.main-info::before {
left: 0;
}
.main-info::after {
right: 0;
}
.main-info > .img {
position: relative;
}
.text {
position: absolute;
display: flex;
width: 100%;
bottom: 0;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
opacity: 1;
color: white;
background-color: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(3px);
z-index: 5;
line-height: 25px;
}
.text > .limit {
color: white;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: relative;
max-width: 100%;
width: 0;
padding: 0 0.5rem;
}
.text > .limit {
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="row m-5">
<div class="col-8">
<div class="main-info">
<div class="img">
<a href="#">
<div class="text">
<div class="limit">Hello World</div>
</div>
<img src="https://placehold.it/272x154" style="width: 100%">
</a>
</div>
</div>
</div>
</div>
答案 2 :(得分:0)
我昨天实际上找到了这个gist,这似乎是针对溢出项边界问题的奇迹修复:
-webkit-mask-image: -webkit-radial-gradient(white, black);