Как расположить изображение поверх и по центру таблицы?
Здравствуйте. Помогите, пожалуйста. Имеется таблица и изображение. Нужно чтобы изображение размещалось поверх таблицы и точно по центру этой таблицы.
Пример простейшей таблицы: <table border="1"> <tr> <td>ячейка</td> <td>ячейка</td> <td>ячейка</td> <td>ячейка</td> </tr> <tr> <td>ячейка</td> <td>ячейка</td> <td>ячейка</td> <td>ячейка</td> </tr> <tr> <td>ячейка</td> <td>ячейка</td> <td>ячейка</td> <td>ячейка</td> </tr> <tr> <td>ячейка</td> <td>ячейка</td> <td>ячейка</td> <td>ячейка</td> </tr> <tr> <td>ячейка</td> <td>ячейка</td> <td>ячейка</td> <td>ячейка</td> </tr> </table> Пример изображения: <img src="https://fsd.multiurok.ru/html/2019/02/04/s_5c57eebe8d949/1075492_11.png"> Должно получится вот так - https://prnt.sc/qttk0e Подскажите, как это сделать по средствам html и css? |
Lefseq,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> td{ height: 50px; width: 100px; } table{ position: relative; } table:after{ content: ""; position: absolute; height: 100%; width: 100%; left: 0; top: 0; background-color: transparent; background-repeat: no-repeat; background-position: center; background-image: url(https://fsd.multiurok.ru/html/2019/02/04/s_5c57eebe8d949/1075492_11.png); background-size: 30% auto; } </style> </head> <body> <table border="1"> <tr> <td>ячейка</td> <td>ячейка</td> <td>ячейка</td> <td>ячейка</td> </tr> <tr> <td>ячейка</td> <td>ячейка</td> <td>ячейка</td> <td>ячейка</td> </tr> <tr> <td>ячейка</td> <td>ячейка</td> <td>ячейка</td> <td>ячейка</td> </tr> <tr> <td>ячейка</td> <td>ячейка</td> <td>ячейка</td> <td>ячейка</td> </tr> <tr> <td>ячейка</td> <td>ячейка</td> <td>ячейка</td> <td>ячейка</td> </tr> </table> </body> </html> |
рони,
Спасибо. |
Часовой пояс GMT +3, время: 14:36. |