Блог

Главная - Вопросы по программированию - Как сделать так, чтобы последний дочерний элемент не исчезал?

Как сделать так, чтобы последний дочерний элемент не исчезал?

#html #css #bootstrap-4 #css-selectors

Вопрос:

Здесь у нас есть div с горизонтальной прокруткой. Хотите удалить затухание с правой стороны для последнего прокручиваемого div. Я придал родительскому div эффект затухания (здесь d-flex затухает). Пробовал использовать n-й дочерний элемент для дочернего div, но он не работает. Есть ли какой-нибудь способ сделать это? Спасибо

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid">
   <div class="d-flex fading">
      <div class="col-xl-3 col-md-6 mb-4">
         <div class="card h-100 py-2">
            <div class="card-body">
            </div>
         </div>
      </div>
     <div class="col-xl-3 col-md-6 mb-4">
         <div class="card h-100 py-2">
            <div class="card-body">
            </div>
         </div>
      </div>
<div class="col-xl-3 col-md-6 mb-4">
         <div class="card h-100 py-2">
            <div class="card-body">
            </div>
         </div>
      </div>
<div class="col-xl-3 col-md-6 mb-4">
         <div class="card h-100 py-2">
            <div class="card-body">
            </div>
         </div>
      </div>
     <div class="col-xl-3 col-md-6 mb-4">
         <div class="card h-100 py-2">
            <div class="card-body">
            </div>
         </div>
      </div>
   </div>
</div>
 
     .fading{
      -webkit-mask-image: linear-gradient(to left, transparent 0%, white 40%);
      mask-image: linear-gradient(to left, transparent 0%, white 40%);
    }
    .card{
      display:block;
      background-color:green;
      border:2px solid black;
      overflow-x:auto;
      whitespace:nowrap;
    }  
    .card-body{
      display:block;
      background-color:green;
    }
   .card:nth-child(n){
      -webkit-mask-image: linear-gradient(to left, transparent 0%, white 0%);
      mask-image: linear-gradient(to left, transparent 0%, white 0%);
   }

пожалуйста, посмотрите пример изображения

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

1. Вы пробовали добавлять position: relative и z-index: 10 к последнему дочернему элементу?

2. Да, пробовал это. Не работает

3. Итак, вы хотите, чтобы исчезал фон, но, очевидно, не содержимое конечного div? Если это так, я думаю, вам нужно применить градиент к фону родительского div, а не ко всему самому родительскому div. Здесь есть некоторая информация об этом в CSS Tricks css-tricks.com/css3-gradients

4. overflow: auto в d-flex fading div нет, может ли это быть проблемой?

Метки: ,