Блог

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

Как создать поле вставки-тень внутри таблицы, которая отображается поверх изображений

#html #css #frontend

#HTML #css #интерфейс

Вопрос:

Я хочу, чтобы эффект рамки-тени отображался по всем элементам внутри таблицы. Вот самое близкое, что я мог бы получить к тому, что я хочу:

 body{
  background: #000;
}

table{


  margin:0px;
  padding:0px;
  display: inline-block;
  background: #aaa;

  box-shadow: inset 1px 1px 20px 20px rgba(0, 0, 0, 1);
  
}



img{
margin: 10px;  


}  
 <body>


<table>

<tr><td><img src="https://miro.medium.com/max/1200/0*VU152GltXiWeD0Xy.png" height=20%></td><td><img src="https://miro.medium.com/max/1200/0*VU152GltXiWeD0Xy.png" height=20%></td></tr>
<tr><td><img src="https://miro.medium.com/max/1200/0*VU152GltXiWeD0Xy.png" height=20%></td><td><img src="https://miro.medium.com/max/1200/0*VU152GltXiWeD0Xy.png" height=20%></td></tr>


</table>

</body>

Прочитав несколько вопросов по stackoverflow, я обнаружил, что лучшим способом сделать это было бы создать div или псевдоэлемент до конца контейнера (в данном случае таблицы) и применить к нему эффект.
Но когда я пытаюсь это сделать, я в конечном итоге перекрываю / переполняю контейнер.
Я попытался изменить несколько параметров для обоих элементов (контейнера и div), но безуспешно.
В следующем фрагменте кода тень зеленая, а границы таблицы красные для целей отладки.

 body{
  background: #000;
}

table{
  border:2px solid red ;
  display: inline-block;
  background: #aaa;
  border-radius:5px;
}

#boxShadow{
  
  position: absolute;
  height: 100%;
  width: 100%;
  box-shadow: inset 1px 1px 20px 20px rgba(0, 255, 0, 1);

}

img{
margin: 10px;  

}  
 <body>

<table>
<tr><td><img src="https://miro.medium.com/max/1200/0*VU152GltXiWeD0Xy.png" height=20%></td><td><img src="https://miro.medium.com/max/1200/0*VU152GltXiWeD0Xy.png" height=20%></td></tr>
<tr><td><img src="https://miro.medium.com/max/1200/0*VU152GltXiWeD0Xy.png" height=20%></td><td><img src="https://miro.medium.com/max/1200/0*VU152GltXiWeD0Xy.png" height=20%></td></tr>
<div id="boxShadow"></div>
</table>

</body>

Код также находится здесь в jsfiddle.com :http://jsfiddle.net/h0rf42m7/1

Ответ №1:

Мне удалось заставить ее работать должным образом, создав новый div для размещения таблицы:

 body{
  background: #000;
}

table{
  position: relative;
  background: #aaa;
  border-radius:5px;
  margin: 0px;
  padding: 0px;
}

#container{
  position: relative;
  display:inline-block;
}

#boxShadow{
  position: absolute;
  top:0;
  height: 100%;
  width: 100%;
  box-shadow: inset 1px 1px 20px 20px rgba(0, 0, 0, 1);
  
}

img{
margin: 10px;  

}  
 <body>

<div id="container">

<table border = 1>
<tr><td><img src="https://miro.medium.com/max/1200/0*VU152GltXiWeD0Xy.png" height=20%></td><td><img src="https://miro.medium.com/max/1200/0*VU152GltXiWeD0Xy.png" height=20%></td></tr>
<tr><td><img src="https://miro.medium.com/max/1200/0*VU152GltXiWeD0Xy.png" height=20%></td><td><img src="https://miro.medium.com/max/1200/0*VU152GltXiWeD0Xy.png" height=20%></td></tr>
</table>
<div id="boxShadow">
</div>

</div>

</body>

Прекрасный эффект!