1

スパンと画像を表示するページがあります。スパンが画像の上に表示されるため、テキストの透明部分の後ろに画像が表示されます: http://www.luckysaddleupholstery.com。

Web ページはかなり単純です。

<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 は他にもありますが、これは配置ではなく、すべてテキストのスタイリングです。

概念は、nav 列の大きなテキストが body div (画像を含む) をオーバーレイし、画像を下にスクロールできるようにすることです。

画像とテキストは CMS システムからレンダリングされるため、html は少し複雑ですが、非常にカスタマイズ可能です!

Firefox では正常にレンダリングされますが、最近のバージョンの Safari / Webkit では最近壊れているようです。

4

0 に答える 0