Question

我使用了封面图片来填充侧边栏，但是在封面图像之间出现了一条黑色线条，该封面图像没有填充身体和封面本身。您可以在行动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;
}

Answer 1

box-shadow .about-blog-author上有-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

将其删除或将{{1}}更改为0

Answer 2

您在.cover-image课程中指定的框阴影。您可以将其删除或相应地调整您的代码和设计，以便您不会在那里看到它。

尝试删除box-shadow属性，您将看到该行消失。

Cover-img和cover-body之间的黑线

2 个答案: