#html #css
#HTML #css
Вопрос:
Игнорируйте довольно отвратительные фотографии (они не настоящие, которые я буду использовать для проекта, просто заполнители), но я пытаюсь создать HTML-шаблон электронной почты. Я создал идеальный шаблон, используя flexbox (см. Изображение ниже), но только что обнаружил, что он не поддерживается в Gmail, поэтому я должен вернуться к использованию HTML table .
Мой вопрос в том, что у меня есть фоновое изображение, которое перекрывает содержимое выше (с использованием flex), но как я могу добиться того же результата с помощью HTML table ? Проще говоря, я могу зайти в Photoshop и объединить два изображения вместе, но клиент не хочет, чтобы я манипулировал изображениями, если этому можно помочь, поэтому выполнение этого с помощью кода — лучшее решение на данный момент.
table {
width: 350px !important;
max-width: 450px !important;
margin: 0 auto;
border: 1px solid black;
}
thead,
td {
text-align: center;
}
#background {
background-image: url("https://i.ibb.co/qsfyckt/Untitled-1.png");
background-size: cover;
background-position: 100% 0%;
width: 100%;
height: 310px;
position: relative;
z-index: 10000;
top: -7%;
} <!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th colspan="2"><img src="https://images.pexels.com/photos/1043506/pexels-photo-1043506.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=2amp;h=650amp;w=940" style="width: 350px">
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2"><img src="https://images.pexels.com/photos/302899/pexels-photo-302899.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500" style="width: 350px"></td>
</tr>
<tr>
<td id="background" colspan="2"><img src="https://i.ibb.co/qsfyckt/Untitled-1.png" style="width: 350px"></td>
</tr>
</tbody>
</table>
</body>
</html> Ответ №1:
Добавить стили к img
position: relative;
top: -32px;