Блог

Главная - Вопросы по программированию - Почему изображение выглядывает из-за цветового наложения?

Почему изображение выглядывает из-за цветового наложения?

#html #css #twitter-bootstrap #bootstrap-4

#HTML #css #twitter-bootstrap #bootstrap-4

Вопрос:

Я наложил черное наложение на изображения, но я замечаю, что изображения строк слегка выступают из наложения по краям. Разные размеры по-разному влияют на ряд изображений. Я создал CodePen, который загружает Bootstrap 4 CSS amp; 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;
}

Изображения

Изображение 1

Изображение 2 - Крупным планом

Комментарии:

1. взгляните на это перо, оно может помочь: codepen.io/anon/pen/mgJZzw

2. img.card-img-top установлено значение % height. Я заставил это работать, установив высоту в значение px. Я знаю, что это, вероятно, не вариант, но, надеюсь, это укажет вам правильное направление.

3. У вас ошибка <a class="topic-card-box" href="#"> в строке 4.

4. @JenniferGoncalves Хорошая уловка с дополнительным тегом <a>! У меня также было это в другой строке. Исправлены дополнительные теги <a>, но это не решает проблему наложения. Обновлен codepen и вопрос для большей ясности.

5. @JulianoVargas codepen, безусловно, является улучшением, но в некоторых размерах у него все еще есть те же проблемы. Я использую инструмент сравнения кода, чтобы увидеть ваши изменения, но я не уверен, приведет ли это к полному решению. Обновлю, если узнаю больше.

Ответ №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 -->