Блог

Главная - Вопросы по программированию - Как удалить наложение над областью заполнения

Как удалить наложение над областью заполнения

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

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

Вопрос:

У меня есть такой код, здесь вы можете видеть, что я добавил наложение поверх изображения. Однако этот размер по сравнению с малым размером больше, чем у изображения, он показывает наложение даже на область заполнения. Я мог бы заменить это заполнение на margin и удалить это ненужное наложение поверх iamge, однако это переместит последнее изображение в новые строки.

 .sb-overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #0a0a0a;
    z-index: 2;
    cursor: pointer;
    opacity: 0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.sb-overlay:hover{
    opacity: 0.5;
}
.sb-text{
    color: #ffffff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: bold;
}
.s-image img{
width: 100%
}
.grid-item{
padding:5px !important;
}  
 <script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<div class="row">
    <div class="grid-item col-sm-6 col-md-4">
        <a data-content="Here is a caption" class="magnific-popup s-image" href="https://picsum.photos/600/300">
          <img title="This is the title" src="https://picsum.photos/600/300" />
          <div class="sb-overlay">
              <div class="sb-text">
                    This is the title
              </div>
           </div>
        </a>
    </div>
    
        <div class="grid-item col-sm-6 col-md-4">
        <a data-content="Here is a caption" class="magnific-popup s-image" href="https://picsum.photos/600/300">
          <img title="This is the title" src="https://picsum.photos/600/300" />
          <div class="sb-overlay">
              <div class="sb-text">
                    This is the title
              </div>
           </div>
        </a>
    </div>
    
        <div class="grid-item col-sm-6 col-md-4">
        <a data-content="Here is a caption" class="magnific-popup s-image" href="https://picsum.photos/600/300">
          <img title="This is the title" src="https://picsum.photos/600/300" />
          <div class="sb-overlay">
              <div class="sb-text">
                    This is the title
              </div>
           </div>
        </a>
    </div>
    
        <div class="grid-item col-sm-6 col-md-4">
        <a data-content="Here is a caption" class="magnific-popup s-image" href="https://picsum.photos/600/300">
          <img title="This is the title" src="https://picsum.photos/600/300" />
          <div class="sb-overlay">
              <div class="sb-text">
                    This is the title
              </div>
           </div>
        </a>
    </div>
    
        <div class="grid-item col-sm-6 col-md-4">
        <a data-content="Here is a caption" class="magnific-popup s-image" href="https://picsum.photos/600/300">
          <img title="This is the title" src="https://picsum.photos/600/300" />
          <div class="sb-overlay">
              <div class="sb-text">
                    This is the title
              </div>
           </div>
        </a>
    </div>
    
        <div class="grid-item col-sm-6 col-md-4">
        <a data-content="Here is a caption" class="magnific-popup s-image" href="https://picsum.photos/600/300">
          <img title="This is the title" src="https://picsum.photos/600/300" />
          <div class="sb-overlay">
              <div class="sb-text">
                    This is the title
              </div>
           </div>
        </a>
    </div>
</div>

Как я могу удалить это наложение поверх области заполнения, т.Е. Сделать наложение точного размера изображения.

Ответ №1:

Поскольку absolute позиционируемые элементы позиционируются относительно ближайшего родительского элемента с заданной позицией, вы можете добавить position: relative и display: block к своему a.s-image элементу. В настоящее время ваш оверлей позиционируется на .grid-item .

 .sb-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #0a0a0a;
  z-index: 2;
  cursor: pointer;
  opacity: 0;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

.sb-overlay:hover {
  opacity: 0.5;
}

.sb-text {
  color: #ffffff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  font-weight: bold;
}

.s-image {
  display: block;
  position: relative;
}

.s-image img {
  width: 100%
}

.grid-item {
  padding: 5px;  
 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<div class="row">
  <div class="grid-item col-sm-6 col-md-4">
    <a data-content="Here is a caption" class="magnific-popup s-image" href="https://picsum.photos/600/300">
      <img title="This is the title" src="https://picsum.photos/600/300" />
      <div class="sb-overlay">
        <div class="sb-text">
          This is the title
        </div>
      </div>
    </a>
  </div>

  <div class="grid-item col-sm-6 col-md-4">
    <a data-content="Here is a caption" class="magnific-popup s-image" href="https://picsum.photos/600/300">
      <img title="This is the title" src="https://picsum.photos/600/300" />
      <div class="sb-overlay">
        <div class="sb-text">
          This is the title
        </div>
      </div>
    </a>
  </div>

  <div class="grid-item col-sm-6 col-md-4">
    <a data-content="Here is a caption" class="magnific-popup s-image" href="https://picsum.photos/600/300">
      <img title="This is the title" src="https://picsum.photos/600/300" />
      <div class="sb-overlay">
        <div class="sb-text">
          This is the title
        </div>
      </div>
    </a>
  </div>

  <div class="grid-item col-sm-6 col-md-4">
    <a data-content="Here is a caption" class="magnific-popup s-image" href="https://picsum.photos/600/300">
      <img title="This is the title" src="https://picsum.photos/600/300" />
      <div class="sb-overlay">
        <div class="sb-text">
          This is the title
        </div>
      </div>
    </a>
  </div>

  <div class="grid-item col-sm-6 col-md-4">
    <a data-content="Here is a caption" class="magnific-popup s-image" href="https://picsum.photos/600/300">
      <img title="This is the title" src="https://picsum.photos/600/300" />
      <div class="sb-overlay">
        <div class="sb-text">
          This is the title
        </div>
      </div>
    </a>
  </div>

  <div class="grid-item col-sm-6 col-md-4">
    <a data-content="Here is a caption" class="magnific-popup s-image" href="https://picsum.photos/600/300">
      <img title="This is the title" src="https://picsum.photos/600/300" />
      <div class="sb-overlay">
        <div class="sb-text">
          This is the title
        </div>
      </div>
    </a>
  </div>
</div>

ИСПОЛЬЗОВАНИЕ CALC()

Поскольку absolute позиционированные элементы, которые являются дочерними элементами другого элемента padding , считаются включенными в ширину / высоту элемента, вы можете использовать calc для установки ширины и настройки своих top,left,right,bottom значений.

Вы имеете дело с Bootstrap, который автоматически добавляет 15px отступы слева и справа от столбца.

 .sb-overlay{
    position: absolute;
    width: calc(100%-30px);
    height: calc(100%-10px);
    top: 5px;
    left: 15px;
    right: 15px;
    bottom: 5px;
    background-color: #0a0a0a;
    z-index: 2;
    cursor: pointer;
    opacity: 0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.sb-overlay:hover{
    opacity: 0.5;
}
.sb-text{
    color: #ffffff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: bold;
}
.s-image img{
width: 100%
}
.grid-item{
padding:5px;  
 <script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<div class="row">
    <div class="grid-item col-sm-6 col-md-4">
        <a data-content="Here is a caption" class="magnific-popup s-image" href="https://picsum.photos/600/300">
          <img title="This is the title" src="https://picsum.photos/600/300" />
          <div class="sb-overlay">
              <div class="sb-text">
                    This is the title
              </div>
           </div>
        </a>
    </div>
    
        <div class="grid-item col-sm-6 col-md-4">
        <a data-content="Here is a caption" class="magnific-popup s-image" href="https://picsum.photos/600/300">
          <img title="This is the title" src="https://picsum.photos/600/300" />
          <div class="sb-overlay">
              <div class="sb-text">
                    This is the title
              </div>
           </div>
        </a>
    </div>
    
        <div class="grid-item col-sm-6 col-md-4">
        <a data-content="Here is a caption" class="magnific-popup s-image" href="https://picsum.photos/600/300">
          <img title="This is the title" src="https://picsum.photos/600/300" />
          <div class="sb-overlay">
              <div class="sb-text">
                    This is the title
              </div>
           </div>
        </a>
    </div>
    
        <div class="grid-item col-sm-6 col-md-4">
        <a data-content="Here is a caption" class="magnific-popup s-image" href="https://picsum.photos/600/300">
          <img title="This is the title" src="https://picsum.photos/600/300" />
          <div class="sb-overlay">
              <div class="sb-text">
                    This is the title
              </div>
           </div>
        </a>
    </div>
    
        <div class="grid-item col-sm-6 col-md-4">
        <a data-content="Here is a caption" class="magnific-popup s-image" href="https://picsum.photos/600/300">
          <img title="This is the title" src="https://picsum.photos/600/300" />
          <div class="sb-overlay">
              <div class="sb-text">
                    This is the title
              </div>
           </div>
        </a>
    </div>
    
        <div class="grid-item col-sm-6 col-md-4">
        <a data-content="Here is a caption" class="magnific-popup s-image" href="https://picsum.photos/600/300">
          <img title="This is the title" src="https://picsum.photos/600/300" />
          <div class="sb-overlay">
              <div class="sb-text">
                    This is the title
              </div>
           </div>
        </a>
    </div>
</div>

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

1. Не могли бы вы добавить другой способ, я думаю, вы добавили другой способ, который мог бы быть лучше, запуск наложения для значений, отличных от 0, может показаться не таким удобным, особенно мне нужно обновить их, если я обновил заполнение grid-item , например, если я разместил .grid-item{padding: 5px !important} все, что только что перепутал. Я согласен изменить структуру наложения

2. Да, я вернулся к своему первоначальному ответу.

3. @AayushDahal Я установил для первого фрагмента кода значение использовать 0 для всех top,left,right,bottom и добавлять position: relative и display: block к .s-image . Это гарантирует, что независимо от того, какое заполнение вы установили grid-item , наложение всегда будет в нужном месте. Я ввел второй ответ, использование calc() которого менее гибко.