我使用封面图像填充侧边栏,但在未填充正文的封面图像和封面正文本身之间出现了一条黑线。您可以在实际中看到它 here .我很确定这不是边界或其他任何东西。
谢谢!
HTML
<aside id="sidebar">
<div class="cover-img">
<div class="cover-body">
<div class="logo" style="margin-bottom:30px;">
CSS
.cover-img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-box-shadow: 1px 0 1px rgba(0,0,0,0.15);
-moz-box-shadow: 1px 0 1px rgba(0,0,0,0.15);
box-shadow: 1px 0 1px rgba(0,0,0,0.15);
}
.cover-body {
position: absolute;
bottom: 0;
padding: 50px 10% 10%;
width: 100%;
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.cover-body:before {
content: '';
position: absolute;
top: -80px;
right: 0;
bottom: 0;
left: 0;
background-repeat: repeat-x;
background-image: -webkit-linear-gradient(bottom,rgba(0,0,0,0.5) 0,rgba(0,0,0,0.3) 25%,rgba(0,0,0,0) 100%);
background-image: -moz-linear-gradient(bottom,rgba(0,0,0,0.5) 0,rgba(0,0,0,0.3) 25%,rgba(0,0,0,0) 100%);
background-image: -ms-linear-gradient(bottom,rgba(0,0,0,0.5) 0,rgba(0,0,0,0.3) 25%,rgba(0,0,0,0) 100%);
background-image: -o-linear-gradient(bottom,rgba(0,0,0,0.5) 0,rgba(0,0,0,0.3) 25%,rgba(0,0,0,0) 100%);
background-image: linear-gradient(to top,rgba(0,0,0,0.5) 0,rgba(0,0,0,0.3) 25%,rgba(0,0,0,0) 100%);
}
.cover-body {
padding-top: 20px !important;
padding-bottom: 0 !important;
}
最佳答案
你在 .about-blog-author
上有一个 box-shadow
是这样做的:
-webkit-box-shadow: 0 -1px 0 rgba(0,0,0,0.3);
-moz-box-shadow: 0 -1px 0 rgba(0,0,0,0.3);
box-shadow: 0 -1px 0 rgba(0,0,0,0.3);
去掉它或者把-1px
改成0
关于html - cover-img 和 cover-body 之间的黑线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20895211/