HTML中这种白色框怎么去掉，或者变成透明？
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的家乡</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-image: url(img/1.jpg);
background-size: 100% 100%;
background-attachment: fixed;
}
header {
background-image: url("img/2.jpg");
color: rgba(255,255,255,1.00);
text-align: center;
padding: 1em;
}
nav {
display: flex;
justify-content: space-around;
background-color: transparent;
}
nav a {
color: white;
text-decoration: none;
padding: 1em;
}
nav a:hover {
background-color: transparent;
}
main {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 2em;
}
.section {
flex: 1;
min-width: 300px;
margin: 1em;
padding: 1em;
background-color: #f1f1f1;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 1em;
margin-top: 2em;
}
</style>
</head>
<body>
<header>
<h1>欢迎来到我的家乡--西安</h1>
</header>
<nav>
<a href="home.html">地方美食</a>
<a href="history.html">历史文化</a>
<a href="geography.html">地理环境</a>
<a href="scenery.html">风景名胜</a>
</nav>
<main>
<div class="section">
<h2>关于西安</h2>
<p>西安市，古称长安、镐京，陕西省辖地级市，是陕西省省会、副省级市、特大城市、国家中心城市 、西安都市圈以及关中平原城市群核心城市 </p>
</div>
<div class="section">
<h2>历史文化</h2>
<p>西安是国务院公布的首批国家历史文化名城，历史上先后有十多个王朝在此建都，是中国四大古都之一 ，也是世界四大古都之一 ，是中国历史上建都朝代最多、时间最长、影响力最大的都城之一 </p>
</div>
<div class="section">
<h2>地理环境</h2>
<p>西安市位于黄河流域中部关中盆地，介于东经107°40′~109°49′，北纬33°42′~34°45′之间 ，北临渭河和黄土高原，南邻秦岭。</p>
</div>
<div class="section">
<h2>风景名胜</h2>
<p>西安是首批中国优秀旅游城市，文化遗存具有资源密度大、保存好、级别高的特点，在中国旅游资源普查的155个基本类型中，西安旅游资源占据89个。。</p>
</div>
</main>
<footer>
版权所有 © 2023 赵旭升
</footer>
</body>
</html>
