为什么图像会从彩色叠加中窥视？

Question

我在图像上放置了一个黑色的覆盖层，但是我注意到行图像从边缘沿覆盖层的位置略微达到峰值。不同大小会影响图像行。我创建了一个CodePen，可以加载Bootstrap 4 CSS和JS，因此可以实时看到。我还上传了以下图片，以证明您的运气好于其他人，具体取决于屏幕尺寸。感谢帮助！

CodePen： https ：//codepen.io/anon/pen/vMOwLb

的HTML

<div class="card-container mx-auto">
    <div class="card-deck flex-row flex-nowrap card-deck-topic bkg-color">

        <div class="card card-topic">
            <a href="#" class="topic-card-box">
                <img src="https://images-na.ssl-images-amazon.com/images/I/91V8Nhn8CDL._SL1500_.jpg" class="card-img-top" />

                <div class="card-body card-body-topic card-body-topic-align">
                    <p class="card-sub card-sub-topic-title">Title Here<span class="line-two">Second Line of Text</span></p>
                </div>
            </a>
        </div>

       <div class="card card-topic">
            <a href="#" class="topic-card-box">
                <img src="https://images-na.ssl-images-amazon.com/images/I/91V8Nhn8CDL._SL1500_.jpg" class="card-img-top" />
                <div class="card-body card-body-topic card-body-topic-align">
                    <p class="card-sub card-sub-topic-title">Title Here<span class="line-two">Second Line of Text</span></p>
                </div>
            </a>
        </div>

        <div class="card card-topic">
            <a href="#" class="topic-card-box">
                <img src="https://images-na.ssl-images-amazon.com/images/I/91V8Nhn8CDL._SL1500_.jpg" class="card-img-top" />

                <div class="card-body card-body-topic card-body-topic-align">
                    <p class="card-sub card-sub-topic-title">Title Here<span class="line-two">Second Line of Text</span></p>
                </div>
            </a>
        </div>

    </div><!-- END CARD DECK -->
</div><!-- END CARD-CONTIANER -->

的CSS

html{
    font-size:62.5%;
}

.card-deck{
  margin-top:50px
}

.card-container{
    max-width:1400px;
    width:95%;
}

.card-body{
    max-width:250px;
    padding-left:10px;
    margin-top:-2px;
    cursor:pointer;
    transition:.3s;
    -webkit-transition:.3s;
}


.card-deck{
    display: flex;
    overflow: auto;
}

img.card-img-top{
    max-width:250px;
}

.card{
    margin-right:16px;
    border:none;
    flex: 0 0 auto;
}

.bkg-color{
        background-color:purple;
}

.card-block-img{
    margin-bottom:1.75rem;
    margin-top: 3.2rem;
}

.card-block-txt{
    margin-bottom:2.4rem;
}

    .card-sub-topic-title{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        font-family: 'Lora', "Georgia", "Times New Roman";
        color: #fff;
        font-size: 2.4rem;
        line-height: 3.4rem;
    }

    .card-body.card-body-topic.card-body-topic-align{
        margin-top: 0px;
    }

    .card-topic{
        border:0px !important;
        box-shadow: -8px 8px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        margin-left: 10px;
    }

    .card-body-topic{
        background-color: #0000009e;
        border:0px !important;
    }

    .card-topic.card .card-body:hover{
        background-color:#000000c7;
        border: 0px !important;
    }

    .card-body-topic-align{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 100%;
        width:100%;
    }

@media only screen and (min-width: 768px) {

    .card-deck {
        display: flex;
        padding-bottom: 75px;
    }   

    .card-body{
        min-width:350px;
    }

    img.card-img-top{
        min-width:350px;
    }

    .card-block-img{
        margin-bottom:6rem;
    }

@media only screen and (min-width:992px){

    .card-deck .card{
        margin-right:15px;
    }

    .card-body{
        min-width:100%;
    }

    img.card-img-top{
        min-width:100%;
    }

.card-body-topic-align{
    transform: translate(-50%, -50%);
}

.topic-container{
  padding-top:95px;
  margin:6.4rem 0 10.4rem 0;
}

图片

Answer 1

改变了

.card-body-topic-align{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    width:100%;
}

进入

.card-body-topic-align{
        position: absolute;
        top: 0%;
        left: 0%;
        /* transform: translate(-50%, -50%); */
        height: 100%;
        width:100%;
    }

并删除：

@media only screen and (min-width:992px){
  .card-body-topic-align{
    transform: translate(-50%, -50%);
  }
}

您的变换无法覆盖所有屏幕尺寸的所有区域...一定发生了一些舍入，从而阻止了所有像素被覆盖；下面的演示也适用于您的代码笔示例：

.card-body-topic-align{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    width:100%;
}

.card-body-topic-align{
        position: absolute;
        top: 0%;
        left: 0%;
        /* transform: translate(-50%, -50%); */
        height: 100%;
        width:100%;
    }