Question

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

代码笔： 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%);
  }
}

您的变换无法覆盖所有屏幕尺寸的所有区域...必须进行一些舍入操作，以防止覆盖所有像素； 以下演示在您的代码笔示例中也为我工作：

    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: 0%;
  left: 0%;
  /* 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%;
    }
    .topic-container {
      padding-top: 95px;
      margin: 6.4rem 0 10.4rem 0;
    }

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">


<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 -->

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

1 个答案: