1

我有一个显示跨度和图像的页面，其想法是跨度出现在图像上方，以便图像出现在文本的透明部分后面：http ://www.luckysaddleupholstery.com 。

网页相当简单：

<body>
<div id="content" >
    <div id="nav">
        <ul id="pages">
            <li class="selected">
                <a href="/page/LUCKY_SADDLE/">LUCKY SADDLE</a></li>
            <li >
                <a href="/page/designs/">designs</a></li>
            <li >
                <a href="/page/info/">info</a></li>
            <li >
                <a href="/page/contact/">contact</a></li>
        </ul>
    <ul id="subpages">
    </ul>

        <div id="layoutItem40" class="layoutItem textItem titleText" style="left: 0px; top: 196px; width: 556px;"><span style="font-size: 42px; line-height: 42px; color: #B84C59;">VINTAGE. MODERN. TRADITIONAL. BY HAND. STUFFING. HIERLOOM. nostalgic. shabby. recycle. textiles. worn. forgotten. spring. unique. restore. </span>
        </div>
        <img id="logo" src="/static/img/logo.png"/>
        <div id="contact"><strong>T</strong> 07961 706 522<br /><span><strong>E</strong> <a href="mailto:ruth@luckysaddleupholstery.com">ruth@luckysaddleupholstery.com</a></span>
        </div>
    </div>

    <div id="bodyWrapper" style="top: 14px; position: absolute;">
    <div id="body" style="position: relative;">
        <div id="layoutItem49" class="layoutItem imageItem" style="left: 288px; top: 0px; width: 748px;">
            <img  src='/static/media/imgs/Richard-Moore-Chair-Main.jpg' />
        </div>
    </div>
    </div>
</div>
</body>
</html>

css的相关部分：

.layoutItem {
  position: absolute;
  margin-top: 3px;
  margin-left: 1px;
}
.textItem span {
  z-index: 10;
  margin-top: 2px;
  position: relative;
}
.imageItem img { 
  z-index: 1;
  position: relative;
}
#nav {
  width: 172px;
  height: 100%;
  top: 0px;
  position: fixed;
  padding-left: 1px;

}

有更多的 CSS 会影响元素及其父级，但这都是文本样式，而不是定位。

这个概念是导航列中的大文本覆盖了包含图像的主体 div，允许在下方滚动图像。

图像和文本是从 CMS 系统渲染的，这就是为什么 html 有点复杂，虽然非常可定制！

Firefox 中的渲染效果很好，但最近似乎在最近版本的 Safari / Webkit 中出现问题。

4

0 回答 0