Размещение элемента таблицы поверх фона gif - PullRequest
Новая
       0

Размещение элемента таблицы поверх фона gif

0 голосов
/ 15 апреля 2020

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

<!DOCTYPE html>
<html>
<body>
<div id="myDiv"></div>
<head>
<style>
table.table2, table.table1 {
    width: 190.5px;
    height: 50px;
    text-align: left;
    background-color: red;
    border-collapse: collapse;
}
table.table1, td, th, table.table2 td, th {
    border: 1px solid black;
}
div{
  background-image: url(https://media.nature.com/lw800/magazine-assets/d41586-018-04158-5/d41586-018- 
  04158-5_15590100.gif);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 100%;

}
html , body {
    height: 100%;
    margin: 0;
    padding: 0;
}
</style>
</head>
<table class="table1">
<thead><tr><th>Focus</th><th>State</th><th>Alert Level</th></tr></thead>
<tr><td>Eyes</td><td> state </td><td> level </td></tr> 
<tr><td>Head</td><td> state </td><td> level </td></tr>
<tr><td>Body</td><td> state </td><td> level </td></tr>
<tr><td>Vehicle</td><td> state </td><td> level </td></tr>
</table>
<table class="table2">
<thead><tr><th>Current action</th></tr></thead>
<tr><td> vaction </td></tr>
</table>
</body>
</html>

Дело в том, что я хочу, чтобы эта таблица была в верхнем левом углу перед gif background, какие-нибудь идеи, как я мог сделать это? :)

Ответы [ 2 ]

0 голосов
/ 15 апреля 2020 

table.table2, table.table1 {
  width: 190.5px;
  height: 50px;
  text-align: left;
  background-color: red;
  border-collapse: collapse;
}
table.table1, td, th, table.table2 td, th {
  border: 1px solid black;
}
html , body {
  height: 100%;
  margin: 0;
  padding: 0;
}
div.cover {
  background-image: url(https://media.nature.com/lw800/magazine-assets/d41586-018-04158-5/d41586-018-04158-5_15590100.gif);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
}
<div class="cover"> 
  <div>
    <table class="table1">
    <thead><tr><th>Focus</th><th>State</th><th>Alert Level</th></tr></thead>
    <tr><td>Eyes</td><td> state </td><td> level </td></tr> 
    <tr><td>Head</td><td> state </td><td> level </td></tr>
    <tr><td>Body</td><td> state </td><td> level </td></tr>
    <tr><td>Vehicle</td><td> state </td><td> level </td></tr>
    </table>

    <table class="table2">
    <thead><tr><th>Current action</th></tr></thead>
    <tr><td> vaction </td></tr>
    </table>
  </div>
</div>
0 голосов
/ 15 апреля 2020

Хорошо, я сделал это. 

table.table2, table.table1 {
    width: 190.5px;
    height: 50px;
    text-align: left;
    border-collapse: collapse;
}
table.table1, td, th, table.table2 td, th {
    border: 1px solid black;
}
#myDiv{
  background-image: url("https://www.automotor-france.com/wp-content/uploads/2018/10/01-01-1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 10rem;
  width:5rem;

}
<div id="myDiv">
<table class="table1">
<thead><tr><th>Focus</th><th>State</th><th>Alert Level</th></tr></thead>
<tr><td>Eyes</td><td> state </td><td> level </td></tr> 
<tr><td>Head</td><td> state </td><td> level </td></tr>
<tr><td>Body</td><td> state </td><td> level </td></tr>
<tr><td>Vehicle</td><td> state </td><td> level </td></tr>
</table>
<table class="table2">
<thead><tr><th>Current action</th></tr></thead>
<tr><td> vaction </td></tr>
  </div>
</table>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...