我正在寻找一种方法来创建一个带有选项卡式导航的站点，该站点的图像背景“渗入”主 div 进入事件选项卡。我制作了一些 ASCII 艺术作品来描述这一点:
<br/>
+-----------+-----------+-----------+<br/>
|/ / Tab 1 /| ! !Tab 2! | & &Tab 3& |<br/>
| / / / / / +-----------+-----------+----------------+<br/>
|/ / / / / / / / / / / / / / / / / / / / / / / / / / |<br/>
| / / / / / / / / / / / / / / / / / / / / / / / / / /|<br/>
|/ / / / / / / / / / / / / / / / / / / / / / / / / / |<br/>
| / / / / / / / / / / / / / / / / / / / / / / / / / /|<br/>
|/ / / / / / / / / / / / / / / / / / / / / / / / / / |<br/>
| / / / / / / / / / / / / / / / / / / / / / / / / / /|<br/>
|/ / / / / / / Main div here / / / / / / / / / / / / |<br/>
| / / / / / / / / / / / / / / / / / / / / / / / / / /|<br/>
|/ / / / / / / / / / / / / / / / / / / / / / / / / / |<br/>
| / / / / / / / / / / / / / / / / / / / / / / / / / /|<br/>
|/ / / / / / / / / / / / / / / / / / / / / / / / / / |<br/>
| / / / / / / / / / / / / / / / / / / / / / / / / / /|<br/>
|/ / / / / / / / / / / / / / / / / / / / / / / / / / |<br/>
| / / / / / / / / / / / / / / / / / / / / / / / / / /|<br/>
|/ / / / / / / / / / / / / / / / / / / / / / / / / / |<br/>
| / / / / / / / / / / / / / / / / / / / / / / / / / /|<br/>
+----------------------------------------------------+
我的解决方案尝试如下。
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="body">
<div id="nav">
<a href="#home" class="L1 current">Tab 1 >></a><!--
--><a href="#welcome" class="L2">Tab 2 >></a><!--
--><a href="#setup" class="L3">Tab 3 >></a><!--
--><div id="floater"> </div>
</div>
<div id="main">
<br><br><br>Body conent here<br><br><br>
</div>
</div>
</body>
</html>
在 style.css 中:
body { width: 650px; margin: auto; font: 12px "Arial", sans-serif; }
a { text-decoration: none; }
#body { background-image: url('bg.jpg'); }
#nav a, #nav div { display: inline-block; width: 90px; height: 18px; border: 1px black solid; color: black; background-color: #C7E9ED;}
#nav .current { background-color: transparent; border-bottom: 0px; padding-bottom: 1px;}
#nav #floater { background-color: white; width: 375px; padding-top: 1px; border: 0; border-bottom: 1px black solid; }
#main { border: 1px black solid; border-top: 0px; text-align: center; }
但这不适合我的需要，因为我计划也将这些选项卡用作面包屑导航，因此它会因页面而异。
有没有办法将 float 的宽度设置为从最后一个选项卡延伸到导航的边缘？还是有更好的方法？
最佳答案
有一个简单的解决方案，需要理解 background-position 属性。
您需要做的是为每个选项卡设置背景图片，background-position: 0;
对于每个页面，确保为主要区域设置了正确的背景，但使用 background-position: 0 -20px 您将在两个元素上设置背景，但它们应该加入无缝地。您当然需要将背景位置的 y 偏移量调整为标签的(内部)高度。
关于html - 带图像的选项卡式导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4094584/