所以我的网站上有一张背景图片，但如果你仔细观察，你会看到一条小线穿过图片，位于第一个 div 框(名为 .transbox2)上方和下方第二个 div 框(名为 .transbox)。为什么会有这些线条，我可以删除它们吗？
我截取了图片的样子。你可以在这里找到它:
你会明白我对背景图片的意思。
最后，这是背景图片本身。请注意，在 div 框的顶部和底部上方或下方没有线条:
这是我的 CSS:
#minimal_table_for_Master_Evan {
font-family: "Calibri", "Times New Roman", Serif;
font-size: 12px;
font-weight: bold;
margin: 20px;
width: 55%;
border-collapse: collapse;
text-align: left;
}
#minimal_table_for_Master_Evan td {
color: #000;
padding: 6px 8px;
border-bottom: 1px solid #000;
}
html, body {
background-image:url("ADPBackground.jpg");
background-repeat: repeat;
}
p, h2, h4, li {
font-family: "Calibri", "Times New Roman", Serif;
}
li {
list-style-position:inside;
}
.transbox {
width: 50%;
margin:30px 50px;
background-color:rgba(255,255,255, 0.3);
filter:alpha(opacity=60); /* For IE8 and earlier */
border-radius:25px;
padding: 2em;
}
.transbox2 {
width: 50%;
margin:30px 50px;
background-color:rgba(255,255,255, 0.6);
opacity: 0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
border-radius:25px;
padding: 1em 2em;
}
.transbox p {
margin:30px 40px;
font-weight:bold;
color:#000000;
}
这是我的 HTML:
<!DOCTYPE html>
<center>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet-test.css"/>
<title></title>
</head>
<body>
<div class="transbox2">
<img src="logo" width="134" height="60">
</div>
<div class="transbox">
<h2>Header</h2>
<p>
Nice paragraph
</p>
<h4>Header</h4>
<ol>
<li>Blank text</li>
<li>Blank text</li>
<li>Blank text</li>
</ol>
<form method="post" action="mailto:name@email.com">
<table id="minimal_table_for_Master_Evan">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<p></p>
<input type="submit" value="Save" id="save">
</form>
</div>
</body>
</center>
</html>
最佳答案
发生这种情况的原因是因为 background-repeat: repeat; 要解决此问题，请更改为 no-repeat: true;并将 html 高度设置为 100%
关于html - 背景图像中的线条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23526894/