Question

我正在寻找一种方法来创建一个带有标签式导航的网站，其中的图像背景将主要部分“渗透”到活动标签中。我做了一点ASCII艺术作品来描述这个：

+-----------+-----------+-----------+ |/ / Tab 1 /| ! !Tab 2! | & &Tab 3& | | / / / / / +-----------+-----------+----------------+ |/ / / / / / / / / / / / / / / / / / / / / / / / / / | | / / / / / / / / / / / / / / / / / / / / / / / / / /| |/ / / / / / / / / / / / / / / / / / / / / / / / / / | | / / / / / / / / / / / / / / / / / / / / / / / / / /| |/ / / / / / / / / / / / / / / / / / / / / / / / / / | | / / / / / / / / / / / / / / / / / / / / / / / / / /| |/ / / / / / / Main div here / / / / / / / / / / / / | | / / / / / / / / / / / / / / / / / / / / / / / / / /| |/ / / / / / / / / / / / / / / / / / / / / / / / / / | | / / / / / / / / / / / / / / / / / / / / / / / / / /| |/ / / / / / / / / / / / / / / / / / / / / / / / / / | | / / / / / / / / / / / / / / / / / / / / / / / / / /| |/ / / / / / / / / / / / / / / / / / / / / / / / / / | | / / / / / / / / / / / / / / / / / / / / / / / / / /| |/ / / / / / / / / / / / / / / / / / / / / / / / / / | | / / / / / / / / / / / / / / / / / / / / / / / / / /| +----------------------------------------------------+

我尝试解决方案如下。

<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">&nbsp;</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的宽度设置为从最后一个标签延伸到导航边缘？或者是否有更好的方法？

Answer 1

有一个简单的解决方案，需要了解background-position属性。

您需要做的是使用background-position: 0;

为每个标签设置背景图片

对于每个页面，请确保为主区域设置了正确的背景，但使用background-position: 0 -20px您将在两个元素上设置背景，但它们应无缝连接。当然，您需要将背景位置的y偏移调整为标签的（内部）高度。

Answer 2

可能最好将标签容器（在您的情况下为id ='nav'）背景颜色设置为与最后一个标签相同？

标签导航与图像渗透

2 个答案: