【发布时间】：2022-01-11 00:39:38
【问题描述】：
我正在尝试将背景图像设置为设备屏幕的整个高度，但是我一直遇到一个阻止程序，它只填充了文本上方的屏幕。我一直在努力注意背景图像也需要降低不透明度并将其添加到正文中会影响这一事实？
我该如何解决这个问题？
{编辑： 我删除了中心标签并移动了图像的类以摆脱最大宽度。我的高度仍然有问题。}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NASCAR Fan Email</title>
<style>
body {
Margin: 0;
padding: 0;
}
table {
border-spacing: 0;
}
td {
padding: 0;
}
img {
border: 0;
}
.webkit {
/* max-width: 900px; */
}
.outer {
Margin: 0 auto;
width: 100%;
/* max-width: 900px; */
border-spacing: 0;
font-family: 'sans-serif';
color: black;
}
.fanCouncil {
border-bottom: 8px solid;
border-image: linear-gradient(to right, #ffd659 30%, #e4002b 30%, #e4002b 30%, #e4002b 60%, #007ac2 40%, #007ac2 75%) 5;
}
.fanPhoto {
opacity: 0.4;
}
p {
line-height: 2.2;
max-width: 1200px;
font-size: 40px;
}
a {
font-size: 40px;
}
.photoText {
position: absolute;
top: 30%;
left: 25%;
}
/* p.entryText {
position: absolute;
top: 30%;
left: 25%;
}
.clickStart {
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
position: absolute;
top: 63%;
left: 25%;
}
.unableText {
position: absolute;
top: 65%;
left: 25%;
}
.thankYou {
position: absolute;
top: 87%;
left: 25%;
} */
a.copyLink:visited {
color: rgb(99, 150, 194);
}
@media screen and (max-width: 600px) {
.fanHeader,
.fanPhoto {}
}
@media screen and (max-width: 600px) {}
</style>
</head>
<body>
<div class="webkit">
<table class="outer" align="center">
<tr>
<td>
<table width="100%" style="border-spacing: 0;">
<tr>
<td class="fanCouncil" style="background-color: white; padding: 60px; text-align: center;">
<img class="fanHeader" src="https://www.nascar.com/wp-content/uploads/sites/7/2022/01/07/NFC_Horiz_BlackRGB.png" alt="Fan Email" width="900"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="photoText">
<p class="entryText">Hello, <br> <br> We’d like to invite you to participate in a short survey about this past weekend’s races. This survey should take less than 5 minutes and will be open through Wednesday, August 25. We want to know what you think!</p>
<a href="http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-
Bl/5bn1vdLmXO68WPcydpyM7J
" class="clickStart">Click here to Start</a>
<p style="line-height: 3;" class="unableText">If you are unable to click the link, please copy and past the full URL below into your browser: <br>
<a href="http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-
Bl/5bn1vdLmXO68WPcydpyM7J" class="copyLink">http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-
Bl/5bn1vdLmXO68WPcydpyM7J</a>
</p>
<p class="thankYou">Thank you! <br>Fan Council</p>
</tr>
<tr>
<td>
<table width="100%" style="border-spacing: 0;">
<img class="fanPhoto" src="https://www.nascar.com/wp-content/uploads/sites/7/2022/01/07/NASCAR_FanCouncil_DaytonaFanPhoto_1-1.jpg">
</table>
</td>
</tr>
</table>
</div>
</body>
</html>【问题讨论】：
-
首先，
<center>不是 HTML5 支持的标签。 developer.mozilla.org/en-US/docs/Web/HTML/Element/center -
嘿@MattHamer5 我删除了中心标签并对代码进行了编辑，你认为你有解决高度问题的方法吗？
-
您是否希望背景不移动（固定并居中），而是滚动其中的内容？所以我可以提供帮助（至少尝试提供帮助）
-
@LaaouatniAnas 是的，就是这样
-
@LaaouatniAnas 我相信 tr/td 没问题，这将是一个电子邮件模板
标签： html css height width background-image