Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.01.2020, 08:28
Аспирант
Отправить личное сообщение для Lefseq Посмотреть профиль Найти все сообщения от Lefseq
 
Регистрация: 19.04.2019
Сообщений: 77

Как расположить изображение поверх и по центру таблицы?
Здравствуйте. Помогите, пожалуйста. Имеется таблица и изображение. Нужно чтобы изображение размещалось поверх таблицы и точно по центру этой таблицы.

Пример простейшей таблицы:

<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?
Ответить с цитированием
  #2 (permalink)  
Старый 28.01.2020, 08:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,790

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>
Ответить с цитированием
  #3 (permalink)  
Старый 28.01.2020, 15:56
Аспирант
Отправить личное сообщение для Lefseq Посмотреть профиль Найти все сообщения от Lefseq
 
Регистрация: 19.04.2019
Сообщений: 77

рони,
Спасибо.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изображение в hmtl-документе двигается не так, как было задумано CodeMonk3y Events/DOM/Window 15 12.08.2017 17:15
Как сделать всплывающее окно по центру экрана? jslgogo Общие вопросы Javascript 8 26.08.2014 09:18
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 12:29
окно поверх таблицы qwertycal Общие вопросы Javascript 2 20.02.2013 12:15
Как вставить картинку на страницу поверх ее.. Вадим_СС Javascript под браузер 2 23.04.2012 08:45