Блог

Главная - Вопросы по программированию - Только часть ТАБЛИЦЫ должна быть прозрачной

Только часть ТАБЛИЦЫ должна быть прозрачной

#css

Вопрос:

Я хочу, чтобы нижняя часть моей таблицы была прозрачной, а верхняя ее часть должна быть понятной для чтения.

Это то, что я пробовал:

 .preview {
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 25%, rgba(255,255,255) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(25%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 25%,rgba(255,255,255) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,0) 25%,rgba(255,255,255) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 25%,rgba(255,255,255) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 25%,rgba(255,255,255) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0089fff1', endColorstr='#000000',GradientType=0 );
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
    transition: all 0.3s;
} 
 <table>
  <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
    <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
    <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
    <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
    <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
</table>
<div class="preview"></div>

Это прекрасно работает, и это именно то, что я хочу. Но есть проблема, если вы добавляете содержимое перед этой таблицей, например:

 .preview {
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 25%, rgba(255,255,255) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(25%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 25%,rgba(255,255,255) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,0) 25%,rgba(255,255,255) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 25%,rgba(255,255,255) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 25%,rgba(255,255,255) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0089fff1', endColorstr='#000000',GradientType=0 );
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
    transition: all 0.3s;
} 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, et, cumque. Explicabo consectetur accusamus enim aspernatur veritatis facilis dolores ex necessitatibus beatae aliquam voluptatem debitis eaque neque, consequatur dolorem tenetur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita amet sequi, velit inventore aliquid in dicta ipsum fugiat recusandae iusto distinctio commodi est, asperiores neque hic consequuntur minima, sapiente numquam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem nobis ex soluta eos deleniti, explicabo repellendus repellat rem aliquam quibusdam. Quo, qui, magni! Aperiam illum similique, id, dolor tenetur qui!
<table>
  <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
    <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
    <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
    <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
    <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
</table>
<div class="preview"></div>

Проблема может быть в том, что я использую position: absolute для этого класса preview . Как это должно быть сделано правильно?

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

1. Вам нужно обернуть свою таблицу и класс предварительного просмотра div элементом и установить его position: relative так, чтобы preview класс всегда был абсолютно расположен относительно него

2. @Shahar это не должно быть комментарием, так как это лучший ответ! Спасибо!

Ответ №1:

Попробуйте Этот код

Я перешел top: 0 на bottom:0 в .preview

Завернутый table и <div class="preview"></div> в div стильном стиле position:relative; 

 .preview {
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 25%, rgba(255,255,255) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(25%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 25%,rgba(255,255,255) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,0) 25%,rgba(255,255,255) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 25%,rgba(255,255,255) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 25%,rgba(255,255,255) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0089fff1', endColorstr='#000000',GradientType=0 );
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    transition: all 0.3s;
} 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, et, cumque. Explicabo consectetur accusamus enim aspernatur veritatis facilis dolores ex necessitatibus beatae aliquam voluptatem debitis eaque neque, consequatur dolorem tenetur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita amet sequi, velit inventore aliquid in dicta ipsum fugiat recusandae iusto distinctio commodi est, asperiores neque hic consequuntur minima, sapiente numquam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem nobis ex soluta eos deleniti, explicabo repellendus repellat rem aliquam quibusdam. Quo, qui, magni! Aperiam illum similique, id, dolor tenetur qui!
<div style="position:relative;">
<table>
  <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
    <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
    <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
    <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
    <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
</table>
<div class="preview"></div>
</div>

Ответ №2:

На самом деле absolute элемент всегда находится относительно ближайшего родителя с position: relative

Чтобы решить вашу проблему, вы можете использовать :before псевдоэлемент, чтобы удалить preview div

 table {
  position: relative;
}

table.preview:before {
  content: "";
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(25%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255)));
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255) 100%);
  background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255) 100%);
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255) 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0089fff1', endColorstr='#000000', GradientType=0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150px;
  transition: all 0.3s;
} 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, et, cumque. Explicabo consectetur accusamus enim aspernatur veritatis facilis dolores ex necessitatibus beatae aliquam voluptatem debitis eaque neque, consequatur dolorem tenetur! Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Expedita amet sequi, velit inventore aliquid in dicta ipsum fugiat recusandae iusto distinctio commodi est, asperiores neque hic consequuntur minima, sapiente numquam? Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Quidem nobis ex soluta eos deleniti, explicabo repellendus repellat rem aliquam quibusdam. Quo, qui, magni! Aperiam illum similique, id, dolor tenetur qui!
<table class="preview">
  <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
  <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
  <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
  <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
  <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
</table>
Метки: